-1

For the life of me I can't remove the background/box shadow on a select box in Chrome on OSx. I need it to be flat white like the other inputs. Take a look here:

http://index1.staging.homeflow.co.uk/pdrum/register.html

Some code in use that isn't doing the job:

background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
background: -moz-linear-gradient(top, white, white);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 1) 0px);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
aynber
  • 22,380
  • 8
  • 50
  • 63
user3351146
  • 1
  • 1

2 Answers2

0

Try:

select{
   -webkit-appearance: none;
   box-shadow: none !important;
}
:-webkit-autofill { color: #fff !important; }

You may also want to use:

select:focus { outline: none; }
SW4
  • 69,876
  • 20
  • 132
  • 137
0

Setting -webkit-appearance: inherit; on #pd-signin select removed it for me. Then it seems you would need to add some arrow to indicate it is a drop-down.

Also in regards to SW4's comment:

I would not remove the outline on any focussed element as this is poor for accessibility.

Also refer to this article from Chris Coyier

Dropdown default styling - Chris Coyier

Firefox

-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';

From this answer

Community
  • 1
  • 1
Shannon Young
  • 1,536
  • 1
  • 17
  • 26