by Andreas

Remove action icons from text fields in Internet Explorer 10

Internet Explorer 10 introduced a new feature for input fields: the action icon. These certainly are user friendly, but introduces a problem with KnockoutJS which depends on changes being made to a field by key stroke (read more about forcing binding re-evaluation in one of my other blog posts). If you have a text field where you enter a value to filter the contents of a list, deleting the contents using the action icon will not trigger an update to the view model.

Here’s a text field displayed in Internet Explorer 10:

image

As you can see, the action icon is visible and will clear the contents of the text field when clicked. However, unless you add a custom binding your KnockoutJS view model will not re-evaluate its bindings and trigger an update of your filtered list. That will only happen if you start entering a new value in the text field, or change focus to a different control.

The quickest fix is to remove the action icon through CSS:

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

Refresh your page and notice that the icon is now gone:

image

 

Note: this does not work when you’re running IE10 in IE7, IE8 or IE9 mode.