2

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.

dan1st
  • 12,568
  • 8
  • 34
  • 67

3 Answers3

0

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Ok, excellent! im glad that a solution IS out there, especially in javascript - which i dont know how to hard-code! :D do you have a resource I can use to assist? Ive looked at several before my post, none helped :/ do you know of something that does work? –  Apr 04 '13 at 21:27
  • There are lots out there to choose from, not only these: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/ – Diodeus - James MacFarlane Apr 04 '13 at 21:28
  • None of these seem to be working for me...I am running an asp framework (i didnt make it, im editing it, though) so maybe its messing it up? cant be...but i cant seem to get these working O.o –  Apr 04 '13 at 21:46
  • in case anyone gets here, i recommend this plugin https://silviomoreto.github.io/bootstrap-select/ – oriadam Mar 30 '17 at 06:18
0

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.

Gesha
  • 703
  • 4
  • 7
-1
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/

Community
  • 1
  • 1
zod
  • 12,092
  • 24
  • 70
  • 106
  • Ive never seen the # remove - features O.o shows I still have a lot to learn. let me give this a go for a quick solution! EDIT: Did NOT work. Where did you see this works, as a reference? Maybe it will be useful on another venture. –  Apr 04 '13 at 21:27
  • "#" is not a feature, it's a note from the poster, as in, "remove that line of code". – Diodeus - James MacFarlane Apr 04 '13 at 21:30
  • Sorry, noobish reply on my part! I thought it might be a new feature ive not seen, like a webkit or something... I dont think he read it right, then. I NEED the color:#fff to keep the Select color white, not black. Problem is that firefox uses it for the options, as well. –  Apr 04 '13 at 21:33