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/

Improve this question
2
  • 1
    What exactly isn't working? Are you only trying to remove the default arrow? Commented Apr 22, 2013 at 16:36
  • Every browser has it default style which can be manipulated with JS/JQuery. Use UniformJS, it works. Commented Apr 22, 2013 at 16:38

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.