Hiding/Displaying CSS on different browsers

Question

On firefox and internet explorer dropdown lists (select list) in HTML5 show as the options plus a clickable tab to initiate the dropdown.

On chrome, this same command has no visible display and while the dropdown list initiates when clicked, i'd like there to be a way to visibly show that the displaying option is not the only option (without saying "this is a dropdown list").

As i was developing in chrome, i went on and added this to my css with surrounding the select.

dropdownlabel{
    position: relative;
}
dropdownlabel:after {
    content: '>';
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 8px; top: 0px;
    font-size: 15px;
    position: absolute;
    pointer-events: none;
}

dropdownlabel:before {
    content: '';
    right: 6px; top:0px;
    width: 20px; height:20px;
    position: absolute;
    pointer-events: none;
    display: block;
}

The problem is, now there is the dropdown indicator AND a downwards pointing ">" on internet explorer and firefox. How would i go about hiding this CSS on firefox and internet explorer?

Alternatively, how would i go about only displaying this on Chrome if that's a better method of doing it?

I've heard about media queries and that it's possible to only show CSS for certain browsers but I can't find anything about hiding CSS for firefox or internet explorer.

David Lerner · Accepted Answer · 2014-11-16 00:11:06Z

1

An interesting solution that might work for you, albeit it in an unorthodox way would be to use media-queries.

In particular, invoke a media query that only targets webkit browsers (thus excluding IE and FF).

@media screen and (-webkit-min-device-pixel-ratio:0) {

   /* YOUR CSS */

}

answered Nov 16, 2014 at 0:11

David Lerner

6513 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

David Lerner Over a year ago

This is chiefly because it is impossible to use conditional comments in HTML for any browsers except for IE.

Spratters53 Over a year ago

Okay, and how would i add into what you write the title (class name) of the css i already have? after the "screen" maybe or after the brackets?

David Lerner Over a year ago

Add the CSS you have above in between the two { }. Just to clarify: This will make it so that CSS only affects Webkit-based browsers. To get a list of webkit browsers, see: en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based

David Lerner Over a year ago

And remove the /* YOUR CSS */ comment, obviously. :)

Spratters53 Over a year ago

Aah when you said YOUR CSS, you meant literally! Worked perfectly, thanks :)

Collectives™ on Stack Overflow

Hiding/Displaying CSS on different browsers

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related