Solved

CSS to make my dropdowns look like Firefox in Ubuntu

Posted on 2010-08-19
5
275 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

751 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