Jump to content
  • 0
Sign in to follow this  
Followers 0

Customize Section

Question

Posted

[url="http://www.roma-usa.com/science-info/"]http://www.roma-usa.com/science-info/[/url]

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.

[CODE]
<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">&nbsp;</option>
<option value="-1">Building Technologies</option>
<option value="-1">&mdash;</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 &amp; Technological Offerings</option>

<option value="-1">&nbsp;</option>
<option value="-1">History</option>
<option value="-1">&mdash;</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">&nbsp;</option>
<option value="-1">Science</option>
<option value="-1">&mdash;</option>
<option value="http://www.roma-usa.com/science-info/science/">Chemical Properties of Limewash Paints &amp; 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 &amp; Mold as a Factor in SBS</option>
<option value="http://www.roma-usa.com/science-info/science/">Breathable &amp; Permeable Paints &amp; Plasters</option>
<option value="http://www.roma-usa.com/science-info/science/">A House that Breathes</option>

</select>

</div>

</section>
[/CODE]

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted

http://bavotasan.com/2011/style-select-box-using-only-css/

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

Share this post


Link to post
Share on other sites
  • 0

Posted

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

[img]http://s7.postimage.org/h078cioyz/Screen_Shot_2012_10_08_at_5_44_47_PM.png[/img]

Share this post


Link to post
Share on other sites
  • 0

Posted

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:
[code]

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

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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 - [url="http://jsfiddle.net/QgLNE/1/"]http://jsfiddle.net/QgLNE/1/[/url]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.