An icon for clearing text appears on the focused <input>
.
<style>
input-clear-icon {
/* common style */
}
</style>
<style>
.my-clear-icon {
color: rgb(64, 128, 255);
text-shadow: 2px 1px 2px rgba(64, 128, 255, .7);
}
.my-clear-icon:hover {
color: white;
background-color: rgb(64, 128, 255) !important;
}
</style>
<input
data-input-clear-icon-class="my-clear-icon"
value="blue"
>
<input
data-input-clear-icon-style="color: #ff4040; border-color: #ff8080; background-color: #fff0f0; border-radius: 50%; font-size: 9px;"
value="red circle"
>
<input> | |
<input type="text"> | |
<input type="password"> | |
<input type="number"> | |
<input type="url"> | |
<input type="email"> | |
<input type="tel"> | |
<input type="search"> |
With attribute "data-input-clear-icon-hidden" | |
<input data-input-clear-icon-hidden> | |
Readonly / Disabled | |
<input readonly> | |
<input disabled> | |
Date / Time | |
<input type="date"> | |
<input type="time"> | |
<input type="month"> | |
<input type="week"> | |
<input type="datetime-local"> | |
Textarea | |
<textarea> | |
Non-text | |
<input type="button"> | |
<input type="reset"> | |
<input type="submit"> | |
<input type="image"> | |
<input type="checkbox"> | |
<input type="radio"> | |
<input type="file"> | |
<input type="color"> | |
<input type="range"> | |
<select> |