使用HTML5和CSS3美化表单

最新推荐文章于 2022-12-13 15:04:48 发布

小老虎Love

最新推荐文章于 2022-12-13 15:04:48 发布

阅读量2.1k

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/tenghu8888/article/details/39382979

版权

<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
		<style type="text/css">
			body
				margin:0px;
				padding:0px;
				font:14px/21px "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;
			}
			.contact_form h2,.contact_form label{font-family:Georgia,Times,"Times New Roman",serif;}
			.form_hint,.required_notification{font-size:11px;}
			*:focus{outline:none;}
			::-webkit-input-placeholder{color:blue;}
			:-moz-placeholder{color:blue;}
			:-o-placeholder{color:blue;}
			:ms-placeholder{color:blue;}
			
			
			/*列表样式*/
			.contact_form ul{
				width:750px;
				list-style-type:none;
				list-style-position:outside;
				margin:0px;padding:0px;
			}
			.contact_form li{
				padding:12px;
				border-bottom:1px solid #EEE;
				position:relative;
			}
			
			.contact_form li:first-child,.contact_form li:last-child{
				border-bottom:1px solid #777;
			}
			
			/*表头样式*/
			.contact_form h2{
				margin:0px;
				display:inline;
			}
			
			.required_notification{
				color:#d45252;
				margin:5px 0 0 0;
				display:inline;
				float:right;
			}
			
			/*表单输入样式*/
			.contact_form label{
				width:150px;
				margin-top:3px;
				display:inline-block;
				float:left;
				padding:3px;
			}
			
			.contact_form input{
				height:20px;
				width:220px;
				padding:5px 8px;
			}
			
			.contact_form textarea{
				padding:8px;width:300px;
			}
			
			.contact_form button{
				margin-left:156px;
			}
			
			.contact_form input,.contact_form textarea{
				border:1px solid #AAA;
				box-shadow:0px 0px 3px #CCC,0px 10px 15px #eee inset;
				border-radius:5px;
				padding-right:30px;
				-moz-transition:padding .25s;
				-webkit-transition:padding .25s;
				-o-transition:padding .25s;
				transition:padding .25s;
			}
			
			input:required,textarea:required{
				background:#fff url(ldent.png) no-repeat 98% center;
			}
			
			.contact_form input:focus,.contact_form textarea:focus{
				border:1px solid #aaa;
				box-shadow:0px 0px 5px #eee;
				padding-right:70px;
			}
			
			
			
			.contact_form input:focus:invalid,.contact_form textarea:focus:invalid{
				background:#fff url(must.png) no-repeat 98% center;
				border:1px solid #E01F1F;
				box-shadow:0px 0px 5px #E01F1F;
			}
			
			.contact_form input:required:valid,.contact_form textarea:required:valid{
				background:#FFF url(dui.png) no-repeat 98% center;
				box-shadow:0 0 5px #5cd053;
				border-color:#28921f;
			}
			
			/*按钮样式*/
			button.submit{
				background-color:#68b12f;
				background:-webkit-gradient(linear,left top,left bottom,form(#68b12f),to(#50911e));
				background:-webkit-linear-gradient(top,#68b12f,#50911e);
				background:-moz-linear-gradient(top,#68b12f,#50911e);
				background:-ms-linear-gradient(top,#68b12f,#50911e);
				background:-o-linear-gradient(top,#68b12f,#50911e);
				background:linear-gradient(top,#68b12f,#50911e);
				border:1px solid #50911e;
				border-bottom:1px solid #5b992b;
				border-radius:3px;
				-webkit-border-radius:3px;
				-moz-border-radius:3px;
				-ms-border-radius:3px;
				-o-border-radius:3px;
				box-shadow:inset 0 1px 0 0 #9fd574;
				-webkit-box-boxshaow:0 1px 0 0 #9fd574;
				-moz-box-boxshaow:0 1px 0 0 #9fd574;
				-ms-box-shadow:0 1px 0 0 #9fd574;
				-o-box-shadow:0 1px 0 0 #9fd574;
				color:white;
				font-weight:bold;
				padding:6px 20px;
				text-align:center;
				text-shadow:0 -1px 0 #396715;
				letter-spacing:5px;
				text-indent:5px;
			}
			
			button.submit:hover{
				opacity:.85;
				cursor:pointer;
			}
			
			button.submit:active{
				border:1px solid #20911e;
				box-shadow:0px 0px 10px 5px #356b0b inset;
				-webkit-box-shadow:0px 0px 10px 5px #356b0b inset;
				-moz-box-shadow:0px 0px 10px 5px #356b0b inset;
				-ms-box-shadow:0px 0px 10px 5px #356b0b inset;
				-o-box-shadow:0px 0px 10px 5px #356b0b inset;
			}
			
			.form_hint{
				background:#d45252;
				border-radius:3px 3px 3px 3px;
				color:white;
				margin-left:10px;
				padding:5px 6px;
				z-index:999;
				position:absolute;
				display:none;
			}
			
			.form_hint::before{
				content:url(triangle.png);
				color:#d45252;
				position:absolute;
				top:1px;
				left:-12px;
			}
			
			.contact_form input:focus + .form_hint{display:inline;}
			.contact_form input:required:valid + .form_hint{background:#28921f;}
			.contact_form input:required:valid + .form_hint::before{color:#28921f;content:url(triangle_1.png)}

		</style>
	</head>
	<body>
		<form class="contact_form" action="" method="POST">
			<ul>
				<li>
					<h2>联系我们</h2>
					<span class="required_notification">*表示必填项</span>
				</li>
				<li>
					<label for="name">姓名：</label>
					<input type="text" id="name" placeholder="javin" required="true"/>
				</li>
				<li>
					<label for="email">邮箱：</label>
					<input type="text" id="email" placeholder="javin@example.com" pattern="\w+@\w+(.\w{2,3})+" required="true"/>
					<span class="form_hint">正确格式为：javin@example.com</span>
				</li>
				
				<li>
					<label for="website">网站：</label>
					<input type="url" id="website" placeholder="http://www.baidu.com" title="网址格式错误" required="true" pattern="(http|https)://.+"/>
					<span class="form_hint">正确格式为：http://www.baidu.com</span>
				</li>
				
				<li>
					<label for="message">留言：</label>
					<textarea cols="40" rows="6" required="true"></textarea>
				</li>
				<li><button class="submit">提交</button></li>
			</ul>
		</form>
	</body>
</html>

效果图：

小老虎Love

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用HTML5和CSS3美化表单

body margin:0px; padding:0px; font:14px/21px "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif; } .contact_form h2,.contact_form label{font-family:Georgia,Times,"Times N
复制链接

扫一扫