Solved

CSS to make my dropdowns look like Firefox in Ubuntu

Posted on 2010-08-19
5
272 Views
Last Modified: 2012-05-10
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.
0
Comment
Question by:ttist25
5 Comments
 
LVL 4

Expert Comment

by:Morrisproject
ID: 33472962
Do you have an example screenshot of what your trying to acheive?
0
 
LVL 1

Author Comment

by:ttist25
ID: 33477187
Sure - trying to figure out how to get you a screenshot of the expanded list too
dropdown-closed.png
0
 
LVL 1

Author Comment

by:ttist25
ID: 33477343
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 33481277
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
 
LVL 9

Accepted Solution

by:
Snarfles earned 500 total points
ID: 33481847
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Capture logon name 13 73
How can I increase the size of this logo 5 37
Make Line Items Look Good Over Mobile 2 61
Increase the size of the modal in Bootstrap 5 27
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question