2

I want to change the cmbobox design I rtied to use this code it's working on chrome but it not working on opera and firefox HTML code:

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

CSS Code:

.styled-select select {
       background: transparent;
       width: 268px;
       padding: 5px;
       font-size: 16px;

       border: 0;
       border-radius: 0;
       height: 34px;
       -webkit-appearance: none;
       -moz-appearance:none;
       appearance: none;
       }

.styled-select {
       width: 271px;
       height: 43px;
       overflow: hidden;
       background: url(img/cmbbox.png) no-repeat;
       border: 0;
       }

jsFiddle: http://jsfiddle.net/Sz2e6/

Adrift
  • 58,167
  • 12
  • 92
  • 90
Edward
  • 39
  • 1
  • 1
  • 2
  • 1
    What *exactly* isn't working? Are you only trying to remove the default arrow? – Adrift Apr 22 '13 at 16:36
  • Every browser has it default style which can be manipulated with JS/JQuery. Use [UniformJS](http://uniformjs.com/), it works. – Vucko Apr 22 '13 at 16:38

1 Answers1

1

Full CSS styling of select elements is only support in Chrome browsers. For details, see the second answer to this question.

Since that answer was posted, Firefox has gained some support for styling selects, but not all styling options will be available.

For cross-browser solutions, the normal approach is to hide the select and to style another element to look like a select control.

Community
  • 1
  • 1
George Cummins
  • 28,485
  • 8
  • 71
  • 90