Forums

Shafii

Hello forum,

I'm currently looking at different ways to format list boxes with CSS. In Firefox they're looking pretty cool, but in other browsers ( like safari, chrome and obviously IE) some of the CCS is not working.

The thing is i'm not sure if it something i'm doing wrong, something i could do better or if the browsers simply don't support some styling on the option tag.

Any ideas or feedback on this would be appreciated.

Thanks,
Shafii

http://www.shafshaf.com/links/CSS-ListBox.html

This is a simple example:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
    <style type=\"text/css\">
	#BBListBox.BBListBox 						{ border: none ; height: 300px; overflow: auto ; }
	#BBListBox.BBListBox option					{ color:#666 ; font-size:14px; height: 20px; padding: 4px; background: #DBDADE ; margin: 1px 3px 0 0 ; -moz-border-radius: 5px ; -webkit-border-radius: 5px ;}
	#BBListBox.BBListBox option:hover			{ padding: 3px; border: solid 1px #646E65 ; }
	
	</style>
    <title></title>
</head>


<body>
    <div id=\"page-wrap\">
        
		<select size=\"3\" multiple=\"\" name=\"L36\" class=\"BBListBox\" id=\"BBListBox\"><option value=\"167\">Advertising for the website</option>
			<option class=\"option\" value=\"168\">Direct mail about the website</option>
			<option class=\"option\" value=\"169\">Word of mouth (recommended from friends, relatives or colleagues)</option>
			<option class=\"option\" value=\"170\">Recommended by a credible source</option>
			<option class=\"option\" value=\"171\">You had trust in the brand</option>
			<option class=\"option\" value=\"172\">The site compares all of the companies in the market</option>
			<option class=\"option\" value=\"173\">There are no fees or extra costs from using the website</option>
			<option class=\"option\" value=\"174\">Other</option>
		</select>
    </div>

	
</body>
</html>

james.davis

Here is an article at Smashing Magazine that may steer you in the right direction.

http://www.smashingmagazine.com/2008/04 ... ive-ideas/

Shafii

"james.davis" said:
Here is an article at Smashing Magazine that may steer you in the right direction.

http://www.smashingmagazine.com/2008/04 ... ive-ideas/

Thanks for this link, there's some awesome form design here. however unfortunately there're no examples of list boxes being in a similar way.

If anyone has any experience or example of beautiful design with list boxes that would be great. Of you you can tell me if targeting the option tag with CSS can work in other browser?

Thanks

Eric

Here is a good one... http://www.visibilityinherit.com/code/j ... select.php

treehouse : what would you like to learn today?

Forums

Applying CSS to across multiple browsers