• 0

Customize Section


Question

http://www.roma-usa.com/science-info/

Above is the code I'm doing. I'm trying to customize the "section" tag so it's not the standard drop down that comes with the browser. I don't like it. The problem is that I can't get anything change with CSS. Does anyone know how to customize it? Trying to get it to look like the Newsstand button above it, in the black bar.


<section id="quick-links" class="clearfix">

<label>Go directly to</label>

<div class="selects">

<select class="dropdown" name="Science Information List">
<option value="1">Science Information</option>
<option value="-1"> </option>
<option value="-1">Building Technologies</option>
<option value="-1">—</option>
<option value="http://www.roma-usa.com/science-info/building-technologies/">Ancient Construction Technologies</option>
<option value="http://www.roma-usa.com/science-info/building-technologies/">Passive Construction Buildings</option>
<option value="http://www.roma-usa.com/science-info/building-technologies/">Earth Walls</option>
<option value="http://www.roma-usa.com/science-info/building-technologies/">Bale Walls</option>
<option value="http://www.roma-usa.com/science-info/building-technologies/">Solar Energy Applications</option>
<option value="http://www.roma-usa.com/science-info/building-technologies/">Environmental Science & Technological Offerings</option>

<option value="-1"> </option>
<option value="-1">History</option>
<option value="-1">—</option>
<option value="http://www.roma-usa.com/science-info/history/">Lime Wash Paints</option>
<option value="http://www.roma-usa.com/science-info/history/">Potassium Silicate Paints</option>
<option value="http://www.roma-usa.com/science-info/history/">Marmorino Plasters</option>
<option value="http://www.roma-usa.com/science-info/history/">Grassello di Calce (Venetian Plasters)</option>
<option value="http://www.roma-usa.com/science-info/history/">Hydraulic Lime Cement Stuccos</option>

<option value="-1"> </option>
<option value="-1">Science</option>
<option value="-1">—</option>
<option value="http://www.roma-usa.com/science-info/science/">Chemical Properties of Limewash Paints & Plasters</option>
<option value="http://www.roma-usa.com/science-info/science/">Chemical Properties of Potassium Silicates Paints</option>
<option value="http://www.roma-usa.com/science-info/science/">Mineral Paints versus Latex Paints</option>
<option value="http://www.roma-usa.com/science-info/science/">The Truth About VOC</option>
<option value="http://www.roma-usa.com/science-info/science/">Sick Building Syndrome SBS</option>
<option value="http://www.roma-usa.com/science-info/science/">Humidity & Mold as a Factor in SBS</option>
<option value="http://www.roma-usa.com/science-info/science/">Breathable & Permeable Paints & Plasters</option>
<option value="http://www.roma-usa.com/science-info/science/">A House that Breathes</option>

</select>

</div>

</section>
[/CODE]

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Threetonesun's link works, i tried it with Inspect Element and your link, also you ned to change .dropdown { height: 20px; to 30px its not displaying right in chrome.

Link to comment
Share on other sites

  • 0

Thanks for your help but now, I'm trying to change the drop down look too. Any website that can help me with this or whats the ":" I need to use

Link to comment
Share on other sites

  • 0

I want to customize the drop down and I want it to be black and be part of the button. I try "active" but it does not work. Anyone know how to do this or it needs to be down in Javascript? Also in IE and Firefox the default arrow shows up on it. Do you know how to remove it? I try text-indent but it also moves the text too.

Screen_Shot_2012_10_08_at_5_44_47_PM.png

Link to comment
Share on other sites

  • 0

I use chrome so unable to help with the custom arrow thing, plus im not really a coder. As for the black i guess you mean the white behind building tec etc if so try this:


#quick-links select:hover {
background:url(../images/dropdownhover-arrow.png) no-repeat 97% 55% #D7D7D7;
color:#666;
background-color:#000; /* &lt;---- This is the new code */ 
}

Im sure if its wrong someone can help out better than me the noob anyway best hop to bed.

Link to comment
Share on other sites

  • 0

I'm sure someone's going to hate me for suggesting this (I'm dying inside a little from typing it), but as far as I know there's no real cross-browser solution at the moment for styling select tags consistently. The easiest alternative is to recreate the effect with HTML using a UL and (sadly) some JS. It'll save you a lot of time banging your head off the wall.

A quick hacky implementation to show you the basics of it - http://jsfiddle.net/QgLNE/1/

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.