CODEWITHSUNDEEP
css
Unknown Error
Unknown Error

Reputation: 797

How do I remove white background for select option in Chrome?

Here an example http://jsfiddle.net/h6PLV/ background:none;

On Google Chrome have white color around the select option. In Firefox looks great.

How do I remove the white color on Chrome browser?

Upvotes: 8

Views: 15561

Answers (3)

Yavanosta
Yavanosta

Reputation: 1670

I do not know if this is what you want, but try :

 -webkit-appearance:none;

Upvotes: 1

GGD4V
GGD4V

Reputation: 265

You need to detect the browser using jQuery

if($.browser.chrome){
userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));  
version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
$.browser.safari = false;
         }

Then you can apply multiple changes to these in your css such as background:none by specifying if it's chrome or not.

background-color:#ffffff;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0,               #f4f4f4), color-stop(0.48, #eeeeee), color-stop(0.5, #f6f6f6), color-stop(0.8, #ffffff));
background-image:-webkit-linear-gradient(center bottom, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:-moz-linear-gradient(center bottom, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:-o-linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:-ms-linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);

Upvotes: 1

j08691
j08691

Reputation: 207861

Add -webkit-appearance: none;

.inputtxt {
    border:0;
    background:none;
    -webkit-appearance: none;
}

​jsFiddle example

Upvotes: 9

Related Questions