Link to home
Create AccountLog in
Avatar of TLN_CANADA
TLN_CANADAFlag for Afghanistan

asked on

Changing style of dropdown menu

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
Avatar of yats
yats
Flag of India image

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
Avatar of TLN_CANADA

ASKER

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?
ASKER CERTIFIED SOLUTION
Avatar of yats
yats
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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
use the selected html
CSS3-Contact-Form.htm
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.
it is getting fade.. since drop down is small, it is not visible..
Thank you!