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.

Answer 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 */

}