...

View Full Version : css for <select> tag



mxb7642
07-23-2007, 07:12 PM
is it possible to use css on a select tag to change how the arrow looks?

thanks for you help just in case i forget later :)

rmedek
07-23-2007, 08:52 PM
Not really…for the most part the select tag is controlled by the browser UI, although you can adjust the padding a bit and border/background elements. You could use JS or Flash to create a custom form element, if you're motivated enough.

VIPStephan
07-23-2007, 10:04 PM
…and if you don’t care for user friendlyness/accessibility…

_Aerospace_Eng_
07-23-2007, 10:06 PM
In which case the js versions should degrade gracefully if JS is disabled.
http://www.badboy.ro/articles/2007-01-30/niceforms/

effpeetee
07-24-2007, 11:17 AM
In which case the js versions should degrade gracefully if JS is disabled.
http://www.badboy.ro/articles/2007-01-30/niceforms/
Is this URL a joke?

I can hardly read it. It is so dark and lacking in contrast.

Frank

_Aerospace_Eng_
07-24-2007, 11:30 AM
No its not a joke. The demo in the article can be found here. http://www.badboy.ro/assets/articles/niceforms1.0/niceforms.html
JS needs to be enabled to see it properly.

I can see the text just fine. Guess I should say something like the site colors aren't easy on older eyes?

Donkey
07-24-2007, 12:54 PM
I can see the text just fine. Guess I should say something like the site colors aren't easy on older eyes?I'm about 30 years younger than Frank, still probably old compared to yourself, and my eyesight is reasonably good, but I had to squint to read parts of that page. I would say that is not an accessible page. Low contrast and small fonts really annoy me so if you are colourblind or have failing sight they must be a nightmare. The guy is banging on about usability and he produces a page as bad as that. Incredible.

croatiankid
07-24-2007, 01:17 PM
I'm sure the problem is the different gamma on different monitors. The page looks fine on my desktop, but my laptop shows pages noticeably/considerably darker (on my site I can barely see that the background is textured), so I'm sure I'd have a problem reading this. Some monitors display more brightly, some darker.

Donkey
07-24-2007, 01:22 PM
Some monitors display more brightly, some darker.
Yes but bearing that in mind it is always better to design pages that are readable on virtually every type of monitor.

bbmd
07-24-2007, 03:11 PM
Hi everbody! Lucian, the guy behind badboy.ro here.

Different monitors have different settings so I am aware that on some setups my site is lacking in contrast and readability. However, it should display perfectly fine for the vast majority of users, according to my tests.

Furthermore, the main purpose of the site is to showcase my work, not necessarily be an informational hot-spot. The articles are definitely not the main focus. In that context, I feel the site achieves its goals by centering on the visual impact while maintaining decent readability (for most users).

PS: @Donkey: usability >= readability.

PS2: All modern browsers allow users to increase/decrease the size of text on properly coded sites. Use it, if needed!

ahallicks
07-24-2007, 03:18 PM
Or get EditCSS and change the colours to make reading easier?

There is another nice form changing tool courtesy of Spry (http://labs.adobe.com/technologies/spry/samples/) and the Adobe coders.
Look at the specific form examples

croatiankid
07-24-2007, 03:18 PM
PS2: All modern browsers allow users to increase/decrease the size of text on properly coded sites. Use it, if needed!

I was going to mention that, and

Yes but bearing that in mind it is always better to design pages that are readable on virtually every type of monitor.
I agree.

Donkey
07-24-2007, 03:43 PM
PS: @Donkey: usability >= readability.Not sure what the equals is there for but I assume you are saying that usability is more than readability? I have no argument there.

I know it is possible for the user to change text sizes, zoom in, change colours etc. but surely as designers we should try to make pages that don't need this except in extreme circumstances.

Otherwise we might as well make all text font-size:1%; color:black; and let the user expand it and colour it to suit.

Arbitrator
07-24-2007, 03:57 PM
Is this URL a joke?

I can hardly read it. It is so dark and lacking in contrast.If using Firefox, you might try setting a minimum font size.* I do that to make a lot of these eye‐straining Web sites more readable. If you get the Web Developer extension for Firefox, you can toggle this feature on and off quickly via the extension’s Disable menu.

* Tools > Options > Content tab > Advanced button > Minimum font size field

This particular site doesn’t seem much less readable than most sites out there though. I’ve noticed that certain color combinations tend to be more readable on LCD monitors and worse on CRT monitors, however, so perhaps that’s the difference. I’m using an LCD right now.


PS: @Donkey: usability >= readability.Usability and readability are the same thing. Seems like you’re trying to say “design >= readability”. Personally, I think things are the other way around.

tonic
07-25-2007, 10:04 AM
css is very good thing, but explorer ignores it's standards absolutely...

_Aerospace_Eng_
07-25-2007, 10:18 AM
I think everyone is kind of missing the point here. I wasn't trying to showcase the site I linked to. I was referring to the article on that page which is explained quite well if you could read it. The OP asked about how to style a select element not about how to make sure your site doesn't have any accessibility issues.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum