CSS: Input clear button

by abhitalks

HTML

<div class="field range">
    <span class="closer">
      <input type="text" id="start" placeholder="from" />
    </span>
    <span class="sep">–</span>
    <span class="closer">
      <input type="text" id="end" placeholder="until" />
    </span>    
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-size: 1em; font-family: sans-serif;}
div.field { 
  margin: 4em; 
  display: flex; justify-content: space-between;
}
span.closer {
  display: inline-block; position: relative;
  flex: 1 1 auto;
}
span.sep { flex: 0 1 auto; margin: 0 1em;}
span.closer::before {
  content: '×'; font-weight: bold;
  position: absolute; 
  right: -10px; top: 4px; opacity: 0;
  transition: all 0.2s ease-out;
}
span.closer.dirty::before { 
  right: 6px; opacity: 1; cursor: pointer;
}
span.closer.dirty:hover::before {
  color: #00f;
}
.closer input {
  padding: 3px 16px 3px 4px;
  width: 100%; 
}
::-webkit-input-placeholder { color: #ccc; }
:-moz-placeholder { color: #ccc; }

JavaScript

var closers = document.querySelectorAll('.closer'), 
	inputs = document.querySelectorAll('.closer input');

for (i=0; i < closers.length; i++) {
	closers[i].addEventListener('click', clearer);
}
for (i=0; i < inputs.length; i++) {
	inputs[i].addEventListener('input', closer);
}

function clearer(e) {
  if (e.target.tagName == 'SPAN') {
  	e.target.firstElementChild.value = '';
    e.target.classList.remove('dirty');
  }
}
function closer(e) {
	e.stopPropagation();
  e.target.parentElement.classList.add('dirty');
}