CSS to make my dropdowns look like Firefox in Ubuntu

Hey there,

I really like the way the drop down list boxes (<select>) look in Firefox under Ubuntu.  Is there any way I can replicate that using CSS so it looks like that in Firefox for Windows?

I don't need to worry about IE or anything.  

Thanks.
LVL 1
ttist25Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MorrisprojectCommented:
Do you have an example screenshot of what your trying to acheive?
0
ttist25Author Commented:
Sure - trying to figure out how to get you a screenshot of the expanded list too
dropdown-closed.png
0
ttist25Author Commented:
Here's a view with the dropdown open.  See the dropshadow and how clean it is?

PS - I used "scrot" command line utility to take this picture.  I love Linux!
dropdownopen.png
0
Chris StanyonWebDevCommented:
Elements such as DropDowns, Buttons etc are governed by the Operating System, not the browser and can't readily be changed using CSS. You can change certain properties such as background-color, font, font-size etc, but the actual elements themselves - no go I'm afraid.

There are various Javascript solutions available, but I've never tried them. I tend to think that form elements work best if they are left to look consistently like form elements across the OS.


0
SnarflesCommented:
I don't think he wants to change the elements. You can change the look of dropdowns, text boxes and buttons quite easily. The file upload box is a bastard to try and change but it is possible with some hacks.

The down arrow to the right of the main select... the thing that looks like a triangle... that cannot be changed so keep that in mind.

You can use something like below. Just apply the class to the select like so

<select class="dropdown" alt="Ubuntu Drop Down Box" id="ubunturocks" name="ubunturocks">

So the css code below is for a black style I did and it works, you just need to change the colours and other styles to look like you want.
.dropdown  {
background:url("../images/bg.png") repeat scroll 0 0 transparent;
border:1px solid #444444;
color:#999999;
margin:0;
width:100px;
font-weight:bold;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.