JSFiddle - React, Tailwind, and code Playground

by int32_t

HTML

<label>Normal state. Try hover/focus.</label>
<input type=search value="query"><input type=number value="1"><input type=date value="2013-12-03">

<hr>

<label>Disabled</label>
<input type=search value="query" disabled><input type=number value="2" disabled><input type=date value="2013-12-03" disabled>

<hr>

<label>Read-only</label>
<input type=search value="query" readonly><input type=number value="3" readonly><input type=date value="2013-12-03" readonly>

CSS

label {
    display: block;
}

input:hover::-webkit-calendar-picker-indicator,
input:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
    -webkit-transition: opacity 0.1s;
}
input::-webkit-calendar-picker-indicator {
    opacity: 0;
    -webkit-transition: opacity 0.3s;
}

input:hover::-webkit-inner-spin-button,
input:focus::-webkit-inner-spin-button {
    opacity: 1;
    -webkit-transition: opacity 0.1s;
}
input::-webkit-inner-spin-button,
input:disabled::-webkit-inner-spin-button,
input:read-only::-webkit-inner-spin-button {
    opacity: 0;
    -webkit-transition: opacity 0.3s;
}

input:focus::-webkit-search-cancel-button,
input:focus::-webkit-clear-button,
input:hover::-webkit-search-cancel-button,
input:hover::-webkit-clear-button {
    opacity: 1;
    transition: opacity 0.1s;
}
input:disabled::-webkit-search-cancel-button,
input:disabled::-webkit-clear-button,
input:read-only::-webkit-search-cancel-button,
input:read-only::-webkit-clear-button,
input::-webkit-search-cancel-button,
input::-webkit-clear-button {
    opacity: 0;
    transition: opacity 0.3s;
}

}