label + for

by redky

HTML

<div class="box">
    <input type="text" id="search" />
    <label for="search"></label>
</div>

<div id="result"></div>

CSS

.box {
    position: relative;
    width: 80%;
}

#search {
    padding: 5px 0;
    width: 100%;
}

label {
    position: absolute;
    right: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    background-color: #7f7f7f;
    z-index: 2;
    cursor: pointer;
}

JavaScript

var search = document.querySelector('#search');

function text(string) {
    result.innerHTML = string + '<br />' + result.innerHTML;
}

search.addEventListener('focusin', function(e) {
    text( 'focusin' );
}, false);
search.addEventListener('focusout', function(e) {
  text('focusout');
}, false);
search.addEventListener('focus', function(e) {
  text('focus');
}, false);
search.addEventListener('blur', function(e) {
    text('blur');
}, false);