9

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

Rakesh Juyal
  • 33,043
  • 66
  • 165
  • 212
  • Similar to http://stackoverflow.com/questions/17196845/ie-10s-ms-clear-pseudo-element-and-ie5-quirks-mode except that one asks about IE5 Quirks and not Compatibility View. Obviously, `::-ms-clear` won't work in either mode. – BoltClock Nov 19 '13 at 10:05
  • @BoltClock Could you please suggest what can I do here? Also, is there any website where we can suggest feature request to MsIE to give some option to remove 'X' when DocMode is < 10 ( though I really doubt it :D ) In my case BrowserMode is IE10 but DocMode is IE9. – Rakesh Juyal Nov 19 '13 at 10:08
  • [Identical question here](http://stackoverflow.com/questions/20050416/disable-ie10-clear-field-in-compatibility-mode#comment29865337_20050416). Again, the short answer is that you just can't do this. It isn't possible. If you really want to be rid of this widget, then your **only** option is to use standards mode. If that means fixing your broken CSS to get it working, then maybe that's a good thing. – Spudley Nov 19 '13 at 10:10
  • 1
    Re suggesting the feature: The question I just linked above has a link to MS connect, where you can ask the question. But don't expect it to happen in IE10 or IE11 because they've already been released, and I can't see them adding new functionality post-release. So whatever happens in the future, you're going to have to deal with it in IE10 and IE11. – Spudley Nov 19 '13 at 10:17
  • I don't understand, why you dislike this feature in IE10. Similarly there is [question](http://stackoverflow.com/q/18313867/1671639) for select tag in IE10. In my opinion it is really good otherwise you can go with plugins like bootstrap, etc., – Praveen Nov 19 '13 at 10:23
  • @Praveen Jeganathan: He said "we already have a custom (x) button far right from text-box" – BoltClock Nov 19 '13 at 10:28
  • @PraveenJeganathan we don't dislike this feature, we just don't need it. – Rakesh Juyal Nov 19 '13 at 10:29
  • Sorry, my mistake. Since @Spudley mentioned that not possible *my question, do you think it is better to hide the 'X' `button far right from text-box` only in IE10?* which is possible using conditional comments. – Praveen Nov 19 '13 at 10:34

2 Answers2

10

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.

Rakesh Juyal
  • 33,043
  • 66
  • 165
  • 212
  • For some reason using IE9 mode it doesn't work, and on IE8 it works, but it looks so weird. What I needed really was for setting height:0; padding:10px; was enough for me to make it look as it was with the "x" (only without showing the "x"). Thanks for helping explore an alternate solution. – pqsk May 12 '14 at 21:34
5

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.

Spudley
  • 157,081
  • 38
  • 222
  • 293
  • 1
    **I'm sorry to be the bearer of bad news**, how dramatic ;) +1 for it – Rakesh Juyal Nov 19 '13 at 10:28
  • I feel uneasy about closing the other question as a dupe of this one since they differ by less than a day. Why didn't you vote to close? – BoltClock Nov 19 '13 at 10:28
  • 1
    Thanks, I found this: http://connect.microsoft.com/IE/feedback/details/783743/disable-ie10-clear-field-button-when-rendering-in-compatibility-mode **Microsoft** says this is by design. – Rakesh Juyal Nov 19 '13 at 10:33
  • @BoltClock - I couldn't vote for a dup, since neither of the other questions had an accepted answer. Otherwise I would have done. – Spudley Nov 19 '13 at 10:40
  • @BoltClock I have found the solution ( atleast it is working for me ). I will post it soon. – Rakesh Juyal Nov 20 '13 at 06:37
  • @Spudley I have posted the fix for it. It is working in *IE10* with DocMode as *IE9*. – Rakesh Juyal Nov 20 '13 at 07:09