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

Question

Currently I am working on a website which is using meta tag to render the page in IE9 mode [ BrowserMode: IE10, DocMode: IE9 Standards ]

Answer 1

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.

Answer 2

I'm sorry to be the bearer of bad news, but this is not possible.

If you want to get rid of the close widget, your only option is to switch to standards mode.

In IE10 lots of CSS breaks in the page, so using IE=Edge is not a viable solution as of now ( may be in future this will be used once all the css is fixed, but I don't see this near future ).

So I guess it comes down to how badly you want to get rid of the X widget. If it's bugging you that badly then you will have to bite the bullet, fix your CSS, and switch to standards mode.

Otherwise, you'll just have to live it.

Sorry.