51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

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

时间:2017-08-15 12:05点击:

代码


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的联系人表单输入效果</title>
<!-- Import Google Font - Yanone Kaffeesatz  --> 
<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><!--end user-details-->
<fieldset id="user-message">
<label for="message">Your Message:</label> 
<textarea name="message" rows="0" cols="0"></textarea> 
<input type="submit" value="Submit Message" name="submit" class="submit" />

</fieldset><!-- end user-message --> 
</form>
</body>
</html> 

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开