?
Solved

Changing style of dropdown menu

Posted on 2012-12-23
8
Medium Priority
?
488 Views
Last Modified: 2012-12-24
Hi all,

I've downloaded a script with some nice styling and want my dropdown menu on the menu to have the same styling as this (same width and font size etc). Could someone tell me how to alter this script so that I can do this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	
	<!-- Import Google Font - Yanone Kaffeesatz  -->	
	<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
 
	<title>CSS3 Contact Form</title> 
	
	<style type="text/css"> 
	
	* { margin: 0px; padding: 0px; }
	
	body { 
		margin: 0 auto; 
		background: #f5f5f5; 	
		color: #555;	 
		width: 800px; 
				
		/* make reference to the Yanone Kaffeesatz font */
		font-family: 'Yanone Kaffeesatz', arial, sans-serif;
	}
	
	h1 { 
		color: #555; 
		margin: 0 0 20px 0; 
	}	
		
	label {	
		font-size: 20px;
		color: #666; 
	}
	
	form { 
		float: left;
		border: 1px solid #ddd; 
		padding: 30px 40px 20px 40px; 
		margin: 75px 0 0 0;
		width: 715px;
		background: #fff;
				
		/* -- CSS3 - define rounded corners for the form -- */	
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px; 		
		
		/* -- CSS3 - create a background graident -- */
		background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); 
		background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); 
		
		/* -- CSS3 - add a drop shadow -- */
		-webkit-box-shadow:0px 0 50px #ccc;
		-moz-box-shadow:0px 0 50px #ccc; 
		box-shadow:0px 0 50px #ccc;		 		
	}	
	
	fieldset { border: none; }
	
	#user-details { 
		float: left;
		width: 230px; 
	}
	
	#user-message { 
		float: right;
		width: 405px;
	}
	
	input, textarea { 		
		padding: 8px; 
		margin: 4px 0 20px 0; 
		background: #fff; 
		width: 220px; 
		font-size: 14px; 
		color: #555; 
		border: 1px #ddd solid;
		
		/* -- CSS3 Shadow - create a shadow around each input element -- */ 
		-webkit-box-shadow: 0px 0px 4px #aaa;
		-moz-box-shadow: 0px 0px 4px #aaa; 
		box-shadow: 0px 0px 4px #aaa;
		
		/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
		-webkit-transition: background 0.3s linear;							
	}
	
	textarea {		
		width: 390px; 
		height: 175px; 		 		
	}
	
	input:hover, textarea:hover { 
		background: #eee; 
	}
		
	input.submit { 	
		width: 150px; 
		color: #eee; 
		text-transform: uppercase; 
		margin-top: 10px;
		background-color: #18a5cc;
		border: none;
		
		/* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
		-webkit-transition: -webkit-box-shadow 0.3s linear;
		
		/* -- CSS3 - Rounded Corners -- */
		-moz-border-radius: 4px; 
		-webkit-border-radius: 4px;
		border-radius: 4px; 
						
		/* -- CSS3 Shadow - create a shadow around each input element -- */ 
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 
		background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);		
	} 
	
	input.submit:hover { 		
		-webkit-box-shadow: 0px 0px 20px #555;
		-moz-box-shadow: 0px 0px 20px #aaa; 
		box-shadow: 0px 0px 20px #555;	
		cursor:  pointer; 
	} 		
				
	</style> 
	
</head> 
 
<body> 
	
	<form action="#"> 
	
		<h1>Log Your Exercise </h1>
				
		<fieldset id="user-details">	
			
			<label for="name">Name:</label>
			<input type="text" name="name" value="" /> 
		
			<label for="email">Minutes: </label> 
			<input type="email" name="email" value=""  /> 
		
			<label for="phone"></label>
			<label>Exercise Type:<br />
            <select name="select">
    <option value="Walking">Walking</option>
    <option value="Running">Running</option>
    <option value="Yoga">Yoga</option>
    <option value="Dancing">Dancing</option>
    <option value="Pilates">Pilates</option>
    <option value="Misc">Misc</option>
    <option value="Weights">Weights</option>
  </select>
  </label>
		
		</fieldset><!--end user-details-->
		
		<fieldset id="user-message">
		
			<label for="message">Exercise Details:</label>
			<textarea name="message" rows="0" cols="0"></textarea> 
		
			<input type="submit" value="Log Now" name="submit" class="submit" />		
		
		</fieldset><!-- end user-message -->
		 
	</form>	
 
</body> 
</html> 

Open in new window


Thanks,

Derek
0
Comment
Question by:TLN_CANADA
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 6

Expert Comment

by:yats
ID: 38717988
Use the attached html.

Added the below style:
select{
		font-family: 'Yanone Kaffeesatz', arial, sans-serif;
		margin: 0 auto; 
		background: #f5f5f5; 	
		color: #555;
		font-size: 17px;		
	}

Open in new window

hey.html
0
 

Author Comment

by:TLN_CANADA
ID: 38718005
Thanks that's great. Is there is way to have it so the same fade function appears over the dropdown menu similar to when you slide over a text box?
0
 
LVL 6

Accepted Solution

by:
yats earned 2000 total points
ID: 38718051
add below line:
select:hover {
            background: #aaa;
      }

refer the attach html
hey.html
0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

Author Comment

by:TLN_CANADA
ID: 38719078
Thanks Yats, when you hover over the other elements on the page the colour fades in slowly. Is there any way we could have this on the dropdown menu too ?

Thank you for your help,

Derek
0
 
LVL 6

Expert Comment

by:yats
ID: 38719094
use the selected html
CSS3-Contact-Form.htm
0
 

Author Comment

by:TLN_CANADA
ID: 38719126
Sorry Yats, I probably wasn't clear enough on the last post I sent. In the new sample you sent all that is different is the size of the text in the dropbox and this change is unnecessary.

When a user scrolls over the "Name" field before they click on it to type, it slowly fades from white to grey. I would like the Dropdown menu to have the same fading when a user scrolls over it.
0
 
LVL 6

Expert Comment

by:yats
ID: 38719216
it is getting fade.. since drop down is small, it is not visible..
0
 

Author Comment

by:TLN_CANADA
ID: 38719589
Thank you!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question