Solved

Changing style of dropdown menu

Posted on 2012-12-23
8
437 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
  • 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 500 total points
ID: 38718051
add below line:
select:hover {
            background: #aaa;
      }

refer the attach html
hey.html
0
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now