css - 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 ]

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />

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 ).

Now, the point is all of the textbox have clear button in it. In just one of the textbox we don't need that cross ( as we already have a custom (x) button far right from text-box ).

I tried ::-ms-clear but that didn;t worked as we are on BrowserMode: IE10 and DocMode:Standards. What can be done now to remove that 'X' .

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.