How to add a CSS specifc for Google Chrome?

Question

I need to add a css code that only applies to google chrome but not to firefox.

Problem: I want to put a border-bottom to a div with a class of .div-special

 .div-special{
      border-bottom: 1px solid #c8c8c8;
 }

Output: The border bottom should only apply for google chrome browser but not to firefox.

Please help me.

try to detect user agent with javascript. But user agent can be spoofed easily. — mehulmpt, Sep 04 '14 at 16:01
Prefer feature detection. [Use modernizr for that](http://modernizr.com). [There are several fun ways of going about it](https://github.com/Modernizr/Modernizr/issues/299). — bishop, Sep 04 '14 at 16:03

score 2 · Accepted Answer · answered Sep 04 '14 at 16:02

2

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 .div-special{
      border-bottom: 1px solid #c8c8c8;
 }
}

answered Sep 04 '14 at 16:02

Anton

Benjamin · Answer 2 · 2014-09-04T16:09:50.247

You can try this

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .class{color:red;}
}

/* Safari only override */
::i-block-chrome,.class {
 color:blue;
}}

OR

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .class {
       color:red;
    }
}

JQuery using User Agent

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    $('.container').hide();
}

score 0 · Answer 3 · answered Sep 04 '14 at 16:04

0

@media screen and (-webkit-min-device-pixel-ratio:0) {
   // your CSS here
}

answered Sep 04 '14 at 16:04

Raja Sekar

3 Answers3