amit singh
amit singh

Reputation: 1

Option CSS does not work on Chrome

This code works fine for Mozilla but not for Chrome

option:checked { 
  -webkit-border-radius: 5px !important;
  box-shadow: 0 0 10px 10px #043A4D inset;
}

Upvotes: 0

Views: 34

Answers (2)

Moumit
Moumit

Reputation: 9630

If you wants to more vendor-specific then use this

option:checked {
  -webkit-border-radius: 5px!important;
  -moz-border-radius: 5px!important;
  border-radius: 5px!important;
  -moz-box-shadow: 0 0 10px 10px #043A4D inset;
  -webkit-box-shadow: 0 0 10px 10px #043A4D inset;
  box-shadow: 0 0 10px 10px #043A4D inset;
}

Upvotes: 1

samuelmr
samuelmr

Reputation: 617

I think you are referring to the outline that appears when an element is in focus. If so try removing that in css with

option:focus, option:active {
    outline: none;
}

However you should replace it with something as it's aids visibility of selected elements and also helps with keyboard navigation.

If this isn't the problem could you please provide a screenshot showing the problem.

Some examples of outline usage on CSS-Tricks

Upvotes: 0

Related Questions