How do I style this drop-down box?

[ChrisjChrisj]

In this Form, how do I style this drop-down box?

<form method="get" action="../search1.php">
<select size="1" name="type" />
<option value="1">CHANNEL 1</option>
<option value="2">CHANNEL 2</option>
<option value="any string here">ALL</option>
</select>
<input autocomplete="off" id="keyword" name="keyword" value="Search     [var.site_name]" onclick="clickclear(this, 'Enter Search Words')"   onblur="clickrecall(this,'Enter Search Words')"  />
<input type="submit" value="VIEW" />
</form>

Any example/help will be appreciated.

[James_Hibbard]

@ChrisjChrisj

Any example/help will be appreciated.

Just Google “style select CSS” and you get loads of hits like this:

[PaulOB]

Hi,

It all depends what you want to style as there are only limited options for styling a select box and this varies browser by browser.

The select element uses the border-box model by default so padding and borders are included within the width and height of the element so you need to adjust if you want to match other form elements,

There is little you can do for the option tag apart from changing colours and backgrounds.

Here is a basic form demo I use to remind myself of the differences.

[ChrisjChrisj]

Thanks a lot for those replies. Very helpful.
Can I ask about how I can change the background, when it is selected?
The script I’m using makes the ‘selected’ background dark blue, and I can’t seem to find where that is, to change it. What can I try to find it, or overide it?

[PaulOB]

Hi,

We’d need to see an example as I am not quite sure what you mean.

If you are talking about the focus state of a form control then you can style that as follows:

input:focus,select:focus{background:red}

Note that some browsers will also give focussed elements a coloured outline using the css outline property.

[ChrisjChrisj]

Thank you for that reply/help, once again, much appreciated.
There is still a blue color that I’d like to change.
I’ve attached an image, showing what it looks like after I added the ‘focus’ state code, you kindly provided. Any help with how to change the blue color, will be greatly appreciated.

[PaulOB]

@ChrisjChrisj

Any help with how to change the blue

Unfortunately(as far as I know) no browser allows you to style the selected item and its color/background will depend on which browser you are using although most use the blue and white.

IE11 will allow a hover effect on the option tag but Firefox and Chrome do not.

select option:hover {
    background-color: yellow;
}

The only way to completely style a select element and its options is to use a javscript replacement technique and swap the select for a standard html element like a ul and style it with css as you wish. Of course that means losing the custom the spinning wheel effect that some mobiles apply to this element to make it easier to use so then you have to fork the code yet again.

All in all the best advice is to leave the element alone and go with the basic styling I provided in my first post

[ChrisjChrisj]

Thanks again for your replies.
When I use your suggested:
input,select{

it seems to change many other things in the script.
How can I use this just for the drop-down box?

[RyanReese]

Give the dropdown a class (e.g. dropdown-box) and then change the CSS to match.

[ChrisjChrisj]

thanks for your help.
I tried this, but I don’t think it’s correct:

<select size="1" name="type" class="dropdown_box"/>

css:

input,select.dropdown_box {

Any additional help will be appreciated.

[RyanReese]

What’s your HTML to go with it? We aren’t psychics

[ChrisjChrisj]

Thanks for your reply:

<form method="get" action="../search.php"/>
<select size="1" name="type" class="dropdown_box"/>
<option value="1">CHANNEL 1</option>
<option value="2>CHANNEL 2</option>
<option value="any string here">ALL CHANNELS</option>
</select>

[PaulOB]

@ChrisjChrisj

css: input,select.dropdown_box {

You are also styling all inputs in that rule above so you either need to give classes to the ones that you want to style differently (as you have done with the select dropdown) or if there are many inputs then give a class to the parent and access the elements via the parent.

input.common-input, select.dropdown_box {}

Or:

.formwrap input, .formwrap select {}

As Ryan said its a little hard to give specifics without the full html and css but it should get you on the right track.

[RyanReese]

@ChrisjChrisj

<option value="2>CHANNEL 2</option>

Also that’s missing the end quote FYI.

[James_Hibbard]

Chris,

Be sure to format your code to have it show up in your posts (the reason why the code in post#10 wasn’t displaying).

You can do this by highlighting a code block and hitting the </> button in the editor.