How to Remove Clear Button ( 'X' Button ) from Ie10 Textboxes in Compatibility Mode

How to remove clear button ( 'X' button ) from IE10 textboxes in compatibility mode?

I finally managed to fix this issue. Apparently if you set height and line-height to 0 and padding-top and padding-bottom to half of the height of your textbox, then this awesome 'X' will not be displayed anymore. Atleast this worked for me.

Here is the code pen:
http://codepen.io/rjuyal/pen/iGKnI

Excerpt from code

.gen{
                margin: 10px;
                margin-top: 40px;

                box-shadow: inset 1px 2p 0 rgba(200, 100,10, 0.2 );
                font-size: 16px;

                width: 400px;
                line-height: 18px;
                height:  41px;
                fint-family: 'Lucida Grande' , 'Arial';
                vertical-align: middle;
            }

            .ie10f{
                height: 0px !important;
                line-height: 0px !important;
                padding-top: 22px !important;
                padding-bottom: 22px !important;
            }

You will see two text-boxes one with X another without it.
Best part is, this hides X in IE10 ( no compatibility mode ) also.

P.S. You will have to manually change the DocMode to IE9 from developer tools.

How can I disable the clear button that IE10 inserts into textboxes?

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

Remove IE10's clear field X button on certain inputs?

Style the ::-ms-clear pseudo-element for the box:

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

Remove IE 10 Clear Button From Input Field

You must have selected browser/document mode other then IE10/Standard in F12 tools

How to remove clear button from IE7-9?

Unlike IE10+, IE9 and prior don't display a "clear button" in HTML form fields. Are you trying to enable the page to run in IE7-IE9 mode inside IE10? If not, you don't need to do anything else.

If you are using the X-UA-Compatible declaration to run pages in IE7-IE9 mode inside IE10, you're stuck (no workaround) because the -ms-clear CSS rule is only supported in IE10 mode. (Many duplicates of that question here on StackOverflow)

Internet Explorer 10 ::-ms-clear within compatibility mode

I know this isn't the answer you are perhaps looking for but Microsoft have said that this is "by design" and "is a feature" of the browser and will not fix it.

http://connect.microsoft.com/IE/feedback/details/783743/disable-ie10-clear-field-button-when-rendering-in-compatibility-mode

The product team believes this item works according to its intended
design.

Some people have tried setting line-height: 0; height: 0; padding: 8px; padding-bottom: 8px; with some degree of success as per the following post:

How to remove clear button ( 'X' button ) from IE10 textboxes in compatibility mode?

Event fired when clearing text input on IE10 with clear icon

The only solution I finally found:

// There are 2 events fired on input element when clicking on the clear button:
// mousedown and mouseup.
$("input").bind("mouseup", function(e){
  var $input = $(this),
      oldValue = $input.val();

  if (oldValue == "") return;

  // When this event is fired after clicking on the clear button
  // the value is not cleared yet. We have to wait for it.
  setTimeout(function(){
    var newValue = $input.val();

    if (newValue == ""){
      // Gotcha
      $input.trigger("cleared");
    }
  }, 1);
});

---

Related Topics