CSS <select> class doesn't work in Safari

HTML & CSS
1

Hey Everyone,

I’ve been having several problems with Safari over the past 2 days while developing a small application for a client.

I have a <select> dropdown in my HTML template page, and I inserted a class attribute into the <select> tag and each of the <option> tags in order to change the backgound colors of the different options.

Here is my HTML code :

<select onchange="operatings(this.value);" id="license" size="4" name="license" class="input">
<option value="demo" class="input">Demo</option>
<option value="rentals" class="input">Rentals</option>
<option value="tdm" class="input2">TDM</option>
<option value="native" class="input3">Native</option>
</select>

It should look like this :

…but it just shows white in Safari.

The last three <select> dropdowns have their background colors set with JavaScript according to the selection of the first, but I should be able to sort that out if I can get the CSS problem sorted on the first <select> element.

All help will most definitely be appreciated.

All the best,
Antonie

2

As far as I know, Safari is very limited or limits how much you can style form elements. However I don’t have a mac never did so i can’t test.

3

Hi there ‘logic_earth’,

Thanks for your response.

I also don’t have a Mac, and I don’t have a browser that uses the same rendering engine as Safari, otherwise I would’ve been willing to play around and test it out.

I hope that someone will be able to assist me in this matter.

All the best,
Antonie

4

If you need to take screenshots in Safari, this should be of use to you:
http://www.browsrcamp.com

If you need to test your sites in browsers you don’t have (say, simultaneously?) then check out Browser Shots:

5

Form controls are often hard to style cross browser with the bg-color of the option being a good example of where you can’t get the same results.

6

Tyssen, above “edit” there’s an option to delete the post. Just click the “Delete” radio button, enter a reason for the deletion, and click “delete this post.”

Job done :).

7

Hi there Dan,

Thanks for the links.

I’ve played around (and tried everything) with my HTML/CSS and it seems like it’s impossible to style the background color of these <select> boxes in Safari. Or not?

Any alternatives? Has anyone been able to change the background color of <select> boxes in Safari?

All the best,
Antonie

8

Here’s a page that’s proved helpful…

The short answer is no, safari does it safari’s way… But I think they look pretty clean anyways - why change?

9

Not even the following :

<select style="background-color">
<option>...</option>
</select>

…or…

<select class="input">
<option>...</option>
</select>

…works in Safari according to the screenshots at http://www.browsrcamp.com

This is sad… :frowning:

Antonie

10

Awesome! :wink:
Thanks for the post.

It seems like both Safari and Camino doesn’t support the “background-color” style attribute.

My client wants it to be that way.
These colors help users understand the the downloading procedure better.
(look at the screenshot in the first post)

Yay! I have an official excuse! :smiley:

11

hmmm, I think that if it is a really important message to portray with the style it needs to be done in some other way - if color isn’t the answer then perhaps you should look for another way to display the difference in options.

A client doesn’t want to hear an excuse. They just want to see a result… i’m off to make mine happy :slight_smile: good luck.

12

Hi,

You’re absolutely right!
(i was kidding about the excuse)

I’m emailing my client with a different suggestion.
I was thinking of placing some padding around the select boxes with a 2-3 px border. I can have these borders change colors accordingly.

Edit :
I might even just do the text color. Could work…

I’ll hear what he has to say…

Thanks for the help.

Antonie

13

I wonder if faking it with JavaScript could work… it might be bit overkill, but one never knows (and no, I don’t have a Mac, and I never bothered to find out for myself beforehand).

14

The JS doesn’t work either. Atleast not by trying to set the style or class attribute.

As stated in the first post, the last 3 boxes have their background colors changed with JS according to the selection of the first select box.

Anyhow…
Each <select> is inside a <div> so I’ll use some padding and have the background color of the <div> change to form a thin colored border around the form element.

Thanks for the help guys! :wink: