style HTML5 inputs

index.html

<div>
  <label class="date">Date <input type="date" id="dateInput" /></label> <span class="supportHint" id="dateSupported"></span>
</div>

<div>
  <datalist id="sugg"><option>one</option><option>two</option><option>three</option></datalist>
  <label class="suggestions">Suggestions <input type="text" list="sugg" 
      onFocus="this.placeholder=(this.value||'');this.value=''"
      onChange="this.placeholder=this.value"
      onBlur="this.value=(this.placeholder||'')"
      onKeyUp="8===event.keyCode?this.placeholder='':undefined"
    /></label> <span class="supportHint" id="suggestionsSupported">
</div>
  
<div>
  <span class="checkbox"><input type="checkbox" id="chck" tabindex="-1" /><label for="chck" tabindex="0" onkeyup="32===event.keyCode?(document.getElementById('chck').checked=!document.getElementById('chck').checked):false">Checkbox</label></span>
</div>

script.js

function supportedText(spp){
  return spp?'Yeah - supported':'Nope - unsupported';
}
function isSupported(what){
  let inp = document.getElementById(what+'Input');
  let supp = document.getElementById(what+'Supported');
  supp.innerText=supportedText(inp.type==inp.getAttribute('type')); // diff between type prop and attr value
}

isSupported('date');
document.getElementById('suggestionsSupported').innerText=supportedText(!!window.HTMLDataListElement)

style-html5-inputs.markdown

style HTML5 inputs

A Pen by Sebastian Rothbucher on CodePen.

License.

style.scss

body {
  font-family: sans-serif;
}

body > div {
  margin-bottom: 10px;
}

.supportHint {
  font-size: x-small; 
  color: grey;
}

input, select { /* global styles - making it more light */
  border-left: none; 
  border-right: none; 
  border-top: none; 
  border-bottom: 1px solid lightgrey; 
  border-radius: 0; 
}

label {
  user-select: none; // prevent awkward selections
}

label.suggestions, label.date, label.month, label.time {
  &:after {
    font-family: FontAwesome;
    color: lightgrey; 
    background-color: white; // avoid arrow + symbol
    font-size: smaller;
    display: inline-block; 
    margin-left: -16px;
    width: 14px;
    vertical-align: -5%; // center - best can do
  }
  /*&::-webkit-calendar-picker-indicator {
    opacity: 0; // remove arrow perm'ly
  }*/
  &:hover:after {
    content: '';
    background: none; // still display 2 avoid resize 
  }
}

label.date {
  &:after {
    content: '\f073'; /*$fa-var-calendar*/
  }
  input[type="date"] {
  }
}

label.suggestions {
  &:after {
    content: '\f002'; /*$fa-var-search*/
    vertical-align: 0;
  }
  input[list] {
  }
}

.checkbox { /* most likely a <span> */
  white-space: nowrap; 
  input[type="checkbox"] + label:before {
    font-family: FontAwesome;
    content: '\f096'; /*$fa-var-square-o*/
    display: inline-block; 
    margin-right: 3px; 
    user-select: none; 
  }
  input[type="checkbox"]:checked + label:before {
    content: '\f046'; /*$fa-var-check-square-o*/ /* actually like the width effect - accidentially discovered, but nice! */
  }
  input[type="checkbox"] {
    // bad aria: display: none; /* the actual checkbox is not needed ;-) */
    // better (incl. tabindexes & onkeyup, thx https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/): 
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />