Clear button in html text input box

Question

Hi I am somewhat puzzled by this basic functionality: I have a regular text input html tag, which is a little narrow (20px):

<input type="text" maxlength="3" id="pCF" style="width: 20px;" />

The little "x" clear button on the right side of the input doesn't show up until I increase the width of the box to ~75px.

Any suggestions? How can I ensure the clear button shows up even in this (narrow) input text element?

This is IE11 BTW, which is a requirement for out app.

Thanks!

what "x" clear button? that isn't a default thing in HTML as far as I'm aware. — Michael Coker, May 11 '17 at 14:40
In IE11 the little red 'x' is default - that's why there is none in the code. @MichaelCoker — Albzi, May 11 '17 at 14:42
Doesn't make any difference, the field has to be wide it seems. — Gino, May 11 '17 at 21:39

score 0 · Answer 1 · answered May 11 '17 at 14:43

0

Here you go :

<div style="display:inline-flex">
    <input type="text" maxlength="3" id="pCF" style="width: 20px;" />
    <button>X</button>
</div>

https://jsfiddle.net/emilvr/bzgb8yx3/

answered May 11 '17 at 14:43

Emad Dehnavi

3,262
4
19
44

Thank you. I should've mentioned that I have other fields in the same row already relying on this default behavior, and was hoping to simply keep the same look, with just new reduced width. Adding a button is an option, but now I need to add styling to make it look like default clear buttons in existing controls, and then add custom jq/js code to respond to events... Thanks for you suggestion anyway! – Gino May 11 '17 at 16:21

Marcin Pevik · Answer 2 · 2017-05-11T15:20:44.320

0

You cannot, this is IE11 feature, not a bug. The "x" would overlay the user inpunt, making it unreadable.

You might want to implement your your own "x" button (as suggested before), but you cannot mess with the standard one. Also, read the David's comment under my answer here.

edited May 11 '17 at 15:20

answered May 11 '17 at 14:45

Marcin Pevik

163
1
14

You could do what Emad Dehnavi is suggesting. You just need to set display attribute of text inputs to None. input[type=text]::-ms-clear { display: none; } This will get rid of the standard one, and give you atrue cross browser type of way to do it. See: http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs – David P May 11 '17 at 15:07

score 0 · Answer 3 · answered May 11 '17 at 14:46

0

I don't see a clear button at any width. Changing the input type to search, however, does give a clear button. But 20px is too narrow and the clear button covers the text. 40px works better.

answered May 11 '17 at 14:46

Douglas Tyler Gordon

569
3
10

Thanks, for me it also shows up only at ~75px when I change the type to search from text. – Gino May 11 '17 at 18:38

Clear button in html text input box

3 Answers3