Hi,

I want to custom style Select Drop Down box in WORDPRESS.

 

So the code will be

<select>

<option></option>

<option></option>

</select>

 

I dont want to add any class or id in <select> as this whole piece of code will be generated by WP.

 

So any tutorial or HTML/CSS/Jquery method to do it.

 

Thank you

Would the <select> have a parent container that has a class or id?

Hello,

I am so glad that I am able to attract an experts attention to my post

 

No, I don't want that.

 

Here is the code in my WP site source code:

 

<div id="archives-2" class="widget_archive"><h3>Archives</h3>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">Select Month</option>
<option value=''>September 2013</option>
<option value=''> May 2011</option>
</select>
</div>
 

 

Thank you

 

 

Edit:

OK Teodora, well can it be done if the <select> is inside an class. Because in the code, the <select> is inside widget_archive class.

 

Thank you

Edited September 14, 201313 yr by dsouravs

Here is how it works. If you use the parent container id, like this:

#archives-2 select{
       background:red; /*just for example*/
}

you can style the <select> only within this particular container #archives-2.

 

If you use the parent container class:

.widget_archive select{
       background:red; /*just for example*/
}

all select elements within a container that has a class widget_archive will be styled.

 

Hope that makes sense

Thanks for your help but what I wanted was to make my <select> look like this image

http://pixelsdaily.designshack.netdna-cdn.com/wp-content/uploads/2011/04/dropdown.png

 

with the help of most easiest method of CSS3 and Jquery.

 

My WP codes look like

 

 

<div id="archives-2" class="widget_archive"><h3>Archives</h3>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">Select Month</option>
<option value=''>September 2013</option>
<option value=''> May 2011</option>
</select>
</div>
 

and my CSS look like

 

 

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
 

But I didnt found a single code package that writes easy CSS.

 

Thank you

TC