Jump to content



Photo

Customize Section


  • Please log in to reply
6 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 08 October 2012 - 19:00

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">&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>



#2 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 08 October 2012 - 19:03

http://bavotasan.com...using-only-css/

#3 Xoligy

Xoligy

    Neowinian

  • Joined: 09-May 10

Posted 08 October 2012 - 19:18

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.

#4 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 08 October 2012 - 21:09

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

#5 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 08 October 2012 - 21:47

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.

Posted Image

#6 Xoligy

Xoligy

    Neowinian

  • Joined: 09-May 10

Posted 08 October 2012 - 22:28

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; /* <---- This is the new code */ 
}

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

#7 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 08 October 2012 - 23:29

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/