Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove IE10's "clear field" X button on certain inputs?

It's a useful feature, to be sure, but is there any way to disable it?
For instance, if the form is a single text field and already has a "clear" button beside it, it's superfluous to also have the X. In this situation, it would be better to remove it.

Can it be done, and if so, how?

like image 381
Niet the Dark Absol Avatar asked Dec 23 '12 00:12

Niet the Dark Absol


People also ask

How do you clear the input field in HTML?

To clear all the input in an HTML form, use the <input> tag with the type attribute as reset.


2 Answers

Style the ::-ms-clear pseudo-element for the box:

.someinput::-ms-clear {     display: none; } 
like image 156
Ry- Avatar answered Sep 20 '22 06:09

Ry-


I found it's better to set the width and height to 0px. Otherwise, IE10 ignores the padding defined on the field -- padding-right -- which was intended to keep the text from typing over the 'X' icon that I overlayed on the input field. I'm guessing that IE10 is internally applying the padding-right of the input to the ::--ms-clear pseudo element, and hiding the pseudo element does not restore the padding-right value to the input.

This worked better for me:

.someinput::-ms-clear {   width : 0;   height: 0; } 
like image 22
jimp Avatar answered Sep 19 '22 06:09

jimp