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.