CODEWITHSUNDEEP
htmlcssinternet-explorer
kp singh
kp singh

Reputation: 1460

Set select dropdown style to default

I set border property in select element.

select {
   border: 1px solid #0f0;
}

IE7 doesn't support select styling. So now my requirement is to remove that style from all IE versions (7,8,9...) and make the dropdown as default. But this property works in above IE8. There is any css-only solution for this.

Note: I have specific IE class in html tag. can I use that in css like 

.ie select {}

Upvotes: 0

Views: 429

Answers (2)

G.L.P
G.L.P

Reputation: 7217

There are specific CSS hacks for IE, you can try those if you want like this:

CSS

select {
         border: 2px solid #0f0; /* for all browsers */
         border: 2px solid #000; /* IE8 and below */
         *border: 2px solid #000; /* IE7 and below  */
         _border: 2px solid #000; /* IE6 and below  */
}

Hacking your CSS may seem a quick fix for getting your styles to work across browser types, however, you should really be using conditional statements from within your HTML. e.g.

<!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->

Upvotes: 0

Biswajit Basak
Biswajit Basak

Reputation: 86

You can use the below css hacks to specify IE restricted features. Hope those may help you! Give the red color border for all the browsers and set ne color for the IE browsers.

/* IE 11( Specific ) */

@media all and (-ms-high-contrast:none) {
  #selector {
    color: #FFFFFF;
  }
}

/* IE 10( specific ) */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #selector {
    color: #FFFFFF;
  }
}

/* IE 9( specific ) */

#selector {
  color: #000000; /* Ingeneral, for all browsers */
  color: #FFFFFF \0/IE9; /* Only for IE 9 */
}

/* IE 8( specific ) */

@media \0screen {
  #selector {
    color: #FFFFFF;
  }
}

/* IE 7( specific and below version ) */

#selector {
  *color: #FFFFFF;
}

Cheers :)

Upvotes: 1

Related Questions