Select Box Drop Down Btn colors

liunx

Guest
I know that you can change the colors of your page's scrollbars and the scrollbars within a textarea, but is there any way to change the color of the drop down button on a select box?<!--content-->You mean this?<br />
<br />
If you use forms on your site, you should know that there is a very simple method to<br />
change the "default" appearance of your form elements. Using CSS, we can assign <br />
attributes to the various form elements on our pages to conform to an overall design. <br />
Just about every element can be assigned styles for fonts, background colors, etc.<br />
Here's an example:<br />
<form><br />
<input type="text" style="font-family:verdana; font-size:12px; color:blue; background-<br />
color:ffffcc;"><br><br />
<select style="font-family:verdana; font-size:12px; color:blue; background-color:ffffcc;"><br />
<option>option 1</option><br />
<option>option 2</option><br />
<option>option 3</option><br />
</select><br />
<input type="submit" value=" Go! " style="font-family:verdana; font-size:12px;<br />
color:blue; background-color:ffffcc;"><br />
<form><br />
<br />
:rocker:<!--content-->I would agree with petervazed and take it a step further - create a .css file.<br />
<br />
main.css could contain elements like this:<br />
<br />
/*default input*/<br />
input {<br />
font-family:verdana;<br />
font-size:12px;<br />
color:blue;<br />
background-color:ffffcc;<br />
}<br />
<br />
/*green input*/<br />
input.green {<br />
font-family:verdana;<br />
font-size:12px;<br />
color:blue;<br />
background-color:00ff00;<br />
}<br />
<br />
<br />
At the top of your .htm file, add the following line:<br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"styles/main.css"><br />
Take note of the href area and make sure it matches where the .css file is.<br />
<br />
Inside of your .htm file when you need an input box, all you have to do is<br />
<br />
<input type="text"><br />
<br />
And it will automatically take the attributes of your defined input class inside of your .css file.<br />
<br />
If you want to use the green input, just type<br />
<br />
<input type="text" class="green"><br />
<br />
This creates cleaner code. Plus if you use your green text box 30 times and decide you want it to be red instead, all you have to do is change the attributes in your .css file and all 30 boxes will take on the new atrributes.<br />
<br />
<!-- w --><a class="postlink" href="http://www.bradsoft.com">www.bradsoft.com</a><!-- w --> has an excellent free .css editor called Top Style for help in creating the .css file.<!--content-->No no no no.<br />
That stuff I know.<br />
<br />
I'm just talking about the little drop down Button itself.<br />
It's default is gray and a black down arrow.<br />
I want to change the gray and black to my site colors.<br />
<br />
I don't believe that it's do-able (seeing that even this site's drop downs in the reply form still have the gray button), but I was hoping someone could prove me wrong.<br />
<br />
But, to build on what you guys have posted:<br />
I find it's easier to just build styles like this -<br />
<br />
<style><br />
.green{<br />
background-color:#00ff00;<br />
color:#000000;<br />
} <br />
</style><br />
<br />
Because if you build an Input.green{} style then you can't use it for a Select box. You'd have to create a Select.green{} style.<!--content-->Oops--nothing like a little overkill!<br />
<br />
I'd have to agree, though, that it doesn't seem to be something that can be done (yet).<br />
<br />
I also have to agree with your way of defining styles...don't know why I never thought of doing that way. I've run into the situation you described many times.<!--content-->you can't. the select box is controlled by the OS and not the browser. same with the file input on the browse button.<!--content-->MUST.....CONTROL.....DESIRE...TO.....WRITE....NEW....OS.<br />
<br />
Thanks for the reply my furry guru friend.<br />
<br />
How many people do you think would the POS (putts operating system):D <br />
Catchy name, eh?<!--content-->
 
Back
Top