CODEWITHSUNDEEP
cssgoogle-chromefirefoxselect
user1761419
user1761419

Reputation: 19

I'm trying to style <select> tag in html using css. It works in Firefox properly but not in chrome

I'm trying to style tag in html using css. It works in Firefox properly but not in chrome. Here is the code i use in styling forms. After referring some through internet I used !important; command along with this style sheet. But it did not worked.

.style {
   display: block;
   border: none;
   color: #333;
   background: transparent;
   border-bottom: 1px dotted gray;
   padding: 5px 2px 0 2px;
   width:300px;
   font-size: 14;
   color:#FFF; 
 }

.style:focus{  
   outline: none;
   border-color: #51CBEE;
 }

Upvotes: 0

Views: 945

Answers (2)

johnkavanagh
johnkavanagh

Reputation: 4664

Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!

If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.

Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

Upvotes: 0

Mark
Mark

Reputation: 6855

simply? you can't.

Firefox allows you to do some styling on a <select>, but is not consistence along browsers.

You should go for a JavaScript masking solution if you really want the <select> to be styled crossbrowser.

Maybe Chosen or Selectize can help you.

Upvotes: 2

Related Questions