Is It Possible To Apply Css Styles Depends On Browser?

[Cameron]

Hi everyone,

 

I want to apply different CSS styles in different browsers.

Is it possible?

 

Thank you for your time!

[Xiang]

Hello Cameron,

 

How are you doing?

 

I think, you can use the following code:

<script>
var sheet = document.createElement('style');
     if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )
    {
        sheet.innerHTML = "input[type=text] {color: red !important;}"; //Opera
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        sheet.innerHTML = "input[type=text] {color: purple !important;}"; //Chrome
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
         sheet.innerHTML = "input[type=text] {color: blue !important;}"; //Safari
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 )
    {
         sheet.innerHTML = "input[type=text] {color: red !important;}"; //Firefox
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
      sheet.innerHTML = "input[type=text] {color: orange !important;}"; //IE
    }  
    else
    {
       sheet.innerHTML = "input[type=text] {color: black !important;}"; //other
    }
document.getElementsByTagName('head')[0].appendChild(sheet);
document.head.appendChild(sheet);
    </script>

If you want do not use any browser, you can add "//" before the line for this browser, for example:

//sheet.innerHTML = "input[type=text] {color: red !important;}"; //Opera

 

Also you can add more than one setting:

sheet.innerHTML = "input[type=text] {color: red !important; background-color: black !important;}"; //Firefox
 

Have a good day!