Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS to make my dropdowns look like Firefox in Ubuntu

Posted on 2010-08-19
5
Medium Priority
?
278 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 44

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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

719 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