Solved

Changing style of dropdown menu

Posted on 2012-12-23
8
467 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Json Schema 8 32
simple html dom php accessing table/cell  values 4 19
Responsive Font Size 6 27
JavaScript Sort Ordering and Choice Limiting 5 22
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

856 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