CODEWITHSUNDEEP
htmlinternet-explorerinputinternet-explorer-10
Dr. Greenthumb
Dr. Greenthumb

Reputation: 2316

IE10 html input clear button is hidden when input width is below certain value

I'm experiencing an issue with the html input control in IE10. Whenever I set the width of the input below 87px, the clear button is no longer shown.

87px:

enter image description here

86px:

enter image description here

Control CSS:

float: right;
color: rgb(87,97,112);
height: 23px;
box-shadow: inset 1px 1px 2px #ddd8dc;
margin-bottom: 5px;
font-family: Verdana;        
width: 86px;
padding: 0px 0px 5px 5px;

Any ideas on what is causing this issue? Are there any workarounds?

Upvotes: 2

Views: 550

Answers (1)

Les
Les

Reputation: 10605

I assume you are using HTML5

<input type="search" />

It's a function of padding, font-size and possibly other measures (screen resolution). On IE11, using your CSS, the cut-off for me is 90px width, 89px does not show the clear button.

But if I change the font-size to 6 (ridiculously small), the minimum width that still shows the clear button gets smaller.

The clear button takes up space. It will be sacrificed by IE if the box is too small given the other metrics.

BTW, not all browsers which support HTML5 support the clear button.

Upvotes: 2

Related Questions