CODEWITHSUNDEEP
css
Pluda
Pluda

Reputation: 1477

css style just works on Firefox (win and mac) - set select option style

I would like to have a select element allowing people to preview the css border-style.

I was thinking with a inline style applied to each option it would be quick and simple to reach my goal, but...

it just work on Firefox, both on Mac and Windows platforms, IE, Chrome, Safari, don't like this. is there any work-around to make this css cross-browser?

css code

.select_border_style {
    border:2px;
    margin:6px;
}

html code

<select id='borders'>
    <option class='select_border_style' style='border-style:solid;'>solid</option>
    <option class='select_border_style' style='border-style:dashed;'>dashed</option>
    <option class='select_border_style' style='border-style:dotted;'>dotted</option>
    <option class='select_border_style' style='border-style:double;'>double</option>
    <option class='select_border_style' style='border-style:groove;'>groove</option>
    <option class='select_border_style' style='border-style:ridge;'>ridge</option>
    <option class='select_border_style' style='border-style:inset;'>inset</option>
    <option class='select_border_style' style='border-style:outset;'>outset</option>
</select>

Thanks in advance

Pluda

Upvotes: 0

Views: 583

Answers (1)

ptriek
ptriek

Reputation: 9276

As far as I know it can't be done in Chrome. You could, however, use a jQuery plugin to emulate it:

http://jsfiddle.net/GzDXc/1/

I used a slightly modified version of jqTransform

Upvotes: 1

Related Questions