Remove the Clear button that comes with IE10 and the clear button that comes with ie10

Remove the Clear button that comes with IE10 and the clear button that comes with ie10

Recently, I encountered a problem in my work. Normally in IE8 and IE9, the clear button appears under IE10, that is, there will be a cross on the right side of the form that can clear the content of the form. I have never been compatible with IE10 before, so I searched for the reason. This function is newly added by Microsoft on IE10 to quickly clear form values.

The problem is that there are clear icons and calendar icons on the right side of the Form Control and date component used in the work, so that in IE10, on the right side of the input form, a chart is superimposed. That is, the icons in the control overlap with the clear buttons in IE10. Obviously, this affects the user experience, so it is imperative to remove or hide the button.

First, I want to directly select the button through the developer tool, and then hide the button. However, I found that the node could not be found on the developer tool, which directly led to solution 1 failure.

Through some searches on Stack Overflow, I found the related question: Click to jump

In the answer to the top ticket, select the button through the pseudo-class selector --:-ms-clear, and then hide the button. That is:

input::-ms-clear {    display: none;}

Through testing, this method can indeed remove the button, but agrees with the second answer:

I found it's better to setwidthAndheightTo0px. 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 applyingpadding-rightOf the input to::--ms-clearPseudo element, and hiding the pseudo element does not restorepadding-rightValue toinput.

He thinks it is best to set the height and width to 0 Px to hide the button, because he finds that the button comes with the padding-right attribute to prevent text from overwriting this attribute, if you hide it directly through display, the padding-right attribute will be lost, resulting in a text overwrite bug.

Therefore, the best solution to this problem is to use the pseudo-class selector to select this element and set its height and width to 0 to hide this element:

input::-ms-clear {  width : 0;  height: 0;}