Search 2

by James Wages

HTML

<body bgcolor="313131">

<!-- "this.reset();" causes no results to display in Safari on MacOS or Chrome for WinXP, but works fine in FF, IE, Chrome on MacOS/Win8.1 -->
<form action="https://kiramek.com/japanese/search_results.html" method=get onsubmit="this.submit(); this.reset(); loseFocus(); return false;">
<input id="SearchFieldBL" type="text" name="q" size=25 maxlength=128 accesskey="F" class="search" placeholder="site search..." autocomplete="off">
<input type=hidden name="cx" value="018348177762133457495:mdzyzovqz2q"><input type=hidden name="lr" value="lang_ja"><input type=hidden name="ie" value="UTF-8"><input type=hidden name="">
</form>

</body>

CSS

<style> 
input:-moz-placeholder {color: #fff; opacity:1.0;}
input::-moz-placeholder {color: #fff; opacity:1.0;}
input::-webkit-input-placeholder {color: #fff;}
input:-ms-input-placeholder {color: #fff;}
input::-ms-input-placeholder {color: #fff;}
input, select, textarea{color: #fff;}

input[type=text] {
    opacity: 0.5;
    width: 170px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='24' viewBox='0 0 23.4 23.8'%3E%3Ccircle cx='9.3' cy='9.8' r='4.8' fill='none'/%3E%3Cpath d='M22.6 20.6L16 14c0.8-1.2 1.2-2.7 1.2-4.2 0-4.4-3.5-7.9-7.9-7.9 -4.4 0-7.9 3.5-7.9 7.9 0 4.4 3.5 7.9 7.9 7.9 1.5 0 3-0.5 4.2-1.2l6.6 6.6L22.6 20.6zM9.3 14.6c-2.7 0-4.8-2.2-4.8-4.8S6.6 5 9.3 5s4.8 2.2 4.8 4.8S12 14.6 9.3 14.6z' fill='%23FFF'/%3E%3C/svg%3E");
    background-position: 10px 9px; 
    background-repeat: no-repeat;
    padding: 12px 10px 12px 45px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: initial 0.4s ease-in-out
}

textarea:focus, input:focus {color: #fff;}

input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}
input:focus::-ms-input-placeholder {color: transparent;}

input[type=text]:focus {
    width: 100%;
    outline: none;
    background-color: rgba(0,0,0,0.3);
    border: 2px solid transparent;
    opacity: 1.0;
}
</style>

JavaScript

//clear & defocus search field on page load
document.addEventListener("load",function(evt){
    document.getElementById("SearchFieldBL").reset();
});

//clear & defocus search field on click outside of search field
document.addEventListener('DOMContentLoaded', function(){
  document.getElementById('SearchFieldBL').addEventListener('blur', function(){
    this.value = '';
  });
});

//clear & defocus search field after press of browser Back button on Results page
//(works in FF, Chrome & Safari, but not IE or Edge)
function pageShown(evt){
    if (evt.persisted){
        document.getElementById("SearchFieldBL").blur();
    } else { document.getElementById("SearchFieldBL").value = ""; document.getElementById("SearchFieldBL").blur();}
}
window.addEventListener("pageshow", pageShown, false);

//prevent blue hover border from sticking in iOS Safari on press of browser BACK
function touchStart(evt){
    if (evt){
        document.getElementById("SearchFieldBL").style.border = "2px solid transparent";
        document.getElementById("SearchFieldBL").blur();
    }
}
document.addEventListener("touchstart", touchStart, false);