Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 280
  • Last Modified:

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.
0
ttist25
Asked:
ttist25
1 Solution
 
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 StanyonCommented:
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now