'Firefox CSS select OPTION styling

From what im seeing, you cannot style boxes, because it is OS specific and cannot be broken unless you edit with javascript...

My example is here:

http://www.promilitarybusinessnetwork.com/continueSearch.asp?categoryID=1270

I just restyled the page today. HUGE improvement from where it was before.

Looks perfect in Chrome and Safari...Firefox gives me issues.

  1. In Firefox, the text isnt centered.
  2. I cant use -moz-appearance:none; to get rid of the box in the right.
  3. The items turn up white due to my CSS for chrome and safari. This is only for the SELECT text, but the still stay black in my preferred browsers. In Firefox, it turns the white...

What can i do to change this...?

.select{
width:361px;
height:44px;
color:#FFF;
font-size:14px;
padding-left:10px;
font-weight:bolder;
font-family:Verdana, Geneva, sans-serif;
background-image:url(images/baseselect_up.png);
display:block;
position:absolute;
-webkit-appearance: none;
-moz-appearance: none;
}
.select:hover{
background-image:url(images/baseselector_down.png);
}

<form method="post" action="newSearch.asp">
<select class="select" name="baseID" >  

<% do while not BaseRs.eof %>
<option value="<%=baseRs("baseID")%>"><%=baseRs("base")%></option>
loop %>                                         
</select> <br><br>
<input type="hidden" name="CategoryID" value="<%=sqlFilter(request("categoryID"))%>">
<div style="position:relative; top:14px; left: 264px;"><input type="submit"     value="Continue >>>"></div>
</form>

Is there any way I can edit Mozilla to get the OPTION text white, and hide the SELECT appearance and center text...?

Or am I screwed because of how each OS runs?

I run a MAC in the office, PC at home, so Ive yet to see my site on a pc with these new changes ive made today.

cssfirefoxselectcross-browseroption


Solution 1:[1]

Javascript-based replacements for the SELECT/OPTION are much more reliable and flexible, especially if you want consistency across browsers. You'll find there are things you just can't do using native styling and tags.

Solution 2:[2]

Actually if you don`t wanna use additional plugins the easiest way is to use code like this : 

<label for="upload" class="upFile">Attach file</label>
<input style="display: none;" type="file" id="upload" accept="image/*" name="Change">

You can remove inline css ofc, and also style label to look exactly how you want.

Solution 3:[3]

select{
width:333px;
height:44px;
color:#FFF;

try the below answer for options color

HTML <select> selected option background-color CSS style

http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-multiple-option/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Diodeus - James MacFarlane
Solution 2 Gesha
Solution 3 Community

Related Questions