純CSS3實(shí)現(xiàn)的表單輸入高亮效果

2024-09-05 12:17:09

字體：大中小

供稿：網(wǎng)友

純CSS3實(shí)現(xiàn)的網(wǎng)頁(yè)表單輸入高亮效果，不插入任何的JS代碼，實(shí)現(xiàn)輸入框高亮顯示。這里使用fieldset固定表單，是個(gè)不錯(cuò)的主意。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>純CSS3實(shí)現(xiàn)的聯(lián)系人表單輸入效果</title>	<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' /><style type="text/css"> 	* { margin: 0px; padding: 0px; }		body { 		margin: 0 auto; 		background: #f5f5f5; 			color: #555;	 		width: 800px; 		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;		-webkit-border-radius: 10px;		-moz-border-radius: 10px;		border-radius: 10px; 				background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); 		background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); 		-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;		-webkit-box-shadow: 0px 0px 4px #aaa;		-moz-box-shadow: 0px 0px 4px #aaa; 		box-shadow: 0px 0px 4px #aaa;			-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;		-webkit-transition: -webkit-box-shadow 0.3s linear;		-moz-border-radius: 4px; 		-webkit-border-radius: 4px;		border-radius: 4px; 		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>Get In Touch With Us ...</h1>		<fieldset id="user-details">				<label for="name">Name:</label>			<input type="text" name="name" value="" /> 			<label for="email">Email:</label> 			<input type="email" name="email" value=""  /> 			<label for="phone">Phone:</label> 			<input type="text" name="phone" value=""  /> 			<label for="website">Website:</label> 			<input type="url" name="website" value=""  /> 		</fieldset>		<fieldset id="user-message">			<label for="message">Your Message:</label> 			<textarea name="message" rows="0" cols="0">

上一篇：CSS3縱向的圖片滾動(dòng)，圖文菜單代碼

下一篇：CSS實(shí)現(xiàn)瀑布流空白處背景