0

Internet Explorer inserts a Delete button in text boxes. It appears as a × glyph inside the right side of the text box, when the box has focus and contains some text.

In our online data-entry form, there are several text boxes. Most of them are multiline text boxes and have a scroll bar. In these, Internet Explorer doesn't insert the × glyph.

One of our single-line text boxes is auto-populated by the code, but the user can edit the text. The user's edit persists unless they click Reset. The × glyph that Internet Explorer inserts visually interferes with the Reset, so we want to hide or disable this × glyph:

enter image description here

We have tried tricking the browser, by using a multi-line textbox that has the height equivalent to a single-line text box. This works:

enter image description here

But only until the text box content overflows:

enter image description here

Question: Is there a way to stop Internet Explorer from inserting the × glyph on this one text-box control or on all text-box controls in this online data-entry form?

Brian Tompsett - 汤莱恩
  • 5,195
  • 62
  • 50
  • 120
JeromeR
  • 113
  • 4
  • 1
    The "x" is a CSS pseudo element that you can style, see http://stackoverflow.com/a/14007839. Essentially you remove the "x" from all input fields using this piece of CSS: `input[type=text]::-ms-clear { display: none; }` – pfolta Aug 06 '15 at 21:38
  • 1
    @pfolta If you post this as an answer, i can nominate it to be the answer. – JeromeR Aug 08 '15 at 23:33

1 Answers1

1

The Internet Explorer's × glyph is a CSS pseudo element that can be styled. If you want to remove it from all input text fields, try this code:

input[type=text]::-ms-clear {
    display: none;
}

(Originally answered by minitech https://stackoverflow.com/a/14007839)

Community
  • 1
  • 1
pfolta
  • 73
  • 5