纯CSS3实现的表单输入高亮效果

2020-01-27 14:18:29

字体：大中小

来源：转载

供稿：网友

纯CSS3实现的网页表单输入高亮效果，不插入任何的JS代码，实现输入框高亮显示。这里使用fieldset固定表单，是个不错的主意。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯CSS3实现的联系人表单输入效果</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">

上一篇：CSS实现瀑布流空白处背景

下一篇：CSS3纵向的图片滚动，图文菜单代码