HTML表单优化

最新推荐文章于 2024-03-13 14:51:16 发布

小源丶同学

最新推荐文章于 2024-03-13 14:51:16 发布

阅读量2.3k

点赞数 1

分类专栏：前端开发文章标签： html

本文链接：https://blog.csdn.net/qq_38611556/article/details/79469643

版权

前端开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

运用自己少的可怜的html+css+js知识，写了这么几个美化，提供源代码和美化后的结果给大家

基础：HTML+CSS+JS

文本框优化：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本框美化</title>
	<style type="text/css">
		body{
			font:14px/28px "微软雅黑";
		}
		.contact *:focus{              /*去除浏览器带的边框样式*/
			outline: none;
		}
		.contact{
			width:700px;
			height: auto;
			background: #F6F6F6;
			margin: 40px auto;
			padding: 10px;
		}
		.contact ul{
			width: 700px;
		}
		.contact ul li{
			border-bottom: 1px solid #DFDFDF;
			padding: 12px;
		}
		.contact ul li label{
			width: 120px;
			display: inline-block;
			float: left;
		}
		.contact ul li input[type=text]{
			width: 220px;
			height: 20px;
			border:1px solid #AAAAAA;
			padding:3px 8px;
			border-radius: 5px;              /*圆角*/
			background: url("star.jpg") no-repeat #FFF 98%;
			transition: padding .25s;                /*过渡*/
			/*兼容性考虑*/
			-o-transition: padding .25s;             /* Opera */
			-moz-transition: padding .25s;           /* Firefox 4 */
			-webkit-transition: padding .25s;        /* Safari 和 Chrome */
		}
		.contact ul li input:focus{
			border-color: #C00;
			background-image: url("感叹号.jpg");
			padding-right: 70px;     /*过渡*/
		}
	</style>
</head>
<body>
	<div class="contact">
		<form action="#" method="post" name="cForm">
			<ul>
				<li>
					<label>姓名：</label>
					<input type="text" name="yourname" placeholder="SunBest" required>     
					<!-- required提交时会出现填写字段的提示，无法空着提交 -->
				</li>
			</ul>
			<!-- <input type="submit" name="" value="试一下"> -->
		</form>
	</div>
</body>
</html>

运行结果如下图：

当鼠标点击文本框，就会有这样的效果：

可以看到，文本框变长了，后面星号编程了感叹号，背景的“SunBest”是默认值。

这里说一些，后面的星号和感叹号，都是贴了图片上去，大家可以替换成其他图片。

下拉菜单优化：

先看看效果：

点击后面的三角：

再选择一个城市就可以啦。

由于我自己比较懒，没有添加点击空白处缩回去的功能，大家可以在源代码的基础上自己试一下。

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉列表美化</title>
	<style type="text/css">
		body{
			font: 16px/32px "微软雅黑";
			background: #333333;
		}
		ul{
			list-style: none;
		}
		#box{                               /*把快放在页面中央*/
			width: 500px;
			height: 326px;
			border:3px solid #000000;
			background: #FFF;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -163px 0 0 -250px;
		}
		.province{
			width: 320px;
			height: 42px;
			background: #C00;
			margin: 80px auto;
			position: relative;
		}
		.province strong{
			width: 64px;
			height: 42px;
			line-height: 42px;
			color:#FFF;
			display: block;
			float: left;
			padding-left: 10px;
			
		}
		#selectProvince{
			width: 200px;
			height: 28px;
			background: #FFFFFF url("下拉箭头.png") no-repeat 180px 10px;
			display: block;
			float: left;
			margin-top: 7px;
			padding-left: 8px;
			color: #CCC;
			cursor: pointer;         /*鼠标放上变手*/
		}
		#allProvince{
			width: 318px;
			height: auto;
			line-height: 30px;
			padding-left: 0;
			clear: both;
			position: absolute;
			top: 42px;
			left: 0;
			border: 1px solid #DFDFDF;
			border-top: none;
			display: none;
			background: #FFF;
		}
		#allProvince li{
			height: 30px;
			border-bottom: 1px solid #DFDFDF;
		}
		#allProvince li b{
			width: 40px;
			text-align: center;
			font-weight: bold;
			display: inline-block;
		}
		#allProvince li span{
			padding-right: 15px;
			cursor: pointer;
		}
		#allProvince li span:hover{
			color:#C00;
		}
	</style>
	<script type="text/javascript">
		function addLoadEvent(func){
			var oldonload = window.onload;
			if(typeof window.onload != 'function'){
				window.onload = func;
			}
			else{
				window.onload = function(){
					oldonload();
					func();
				}
			}
		}
		function getDom(id){
			return document.getElementById(id);
		}
		function showProvince(){
			getDom("selectProvince").onclick = showAllProvince;
		}
		function showAllProvince(){
			getDom("allProvince").style.display = "block";
			getDom("selectProvince").style.backgroundImage = "url('上拉箭头.png')";
			getDom("selectProvince").style.color = "#DFDFDF";
			selectProvince();
		}
		function hideAllProvince(){
			getDom("allProvince").style.display = "none";
			getDom("selectProvince").style.backgroundImage = "url('下拉箭头.png')";
			getDom("selectProvince").style.color = "#000000";
		}
		function selectProvince(){
			var pro = getDom("allProvince").getElementsByTagName("li");
			var links;
			for(var i=0;i<pro.length;i++){
				links = pro[i].getElementsByTagName("span");
				for(var j=0;j<links.length;j++){
					links[j].onclick = function(){
						getDom("selectProvince").innerHTML = this.innerHTML;
						hideAllProvince();
					}
				}
			}
		}
		addLoadEvent(showProvince);
	</script>
</head>
<body>
	<div id="box">
		<div class="province">
			<strong>送货至：</strong>
			<span id="selectProvince">北京</span>
			<ul id="allProvince">
				<li><b>A</b><span>安徽</span></li>
				<li><b>B</b><span>北京</span></li>
				<li><b>C</b><span>重庆</span></li>
				<li><b>F</b><span>福建</span></li>
				<li><b>G</b><span>广东</span><span>广西</span><span>甘肃</span></li>
				<li><b>H</b><span>河南</span><span>河北</span><span>湖南</span><span>湖北</span><span>黑龙江</span></li>
				<li><b>J</b><span>吉林</span></li>
				<li><b>L</b><span>辽宁</span></li>
				<li><b>N</b><span>内蒙古</span></li>
				<li><b>Q</b><span>青海</span></li>
				<li><b>S</b><span>上海</span><span>山东</span></li>
				<li><b>T</b><span>天津</span></li>
				<li><b>X</b><span>新疆</span><span>西藏</span></li>
				<li><b>Y</b><span>云南</span></li>
				<li><b>Z</b><span>浙江</span></li>
			</ul>
		</div>
	</div>
</body>
</html>

这里的三角形也是贴的图片哦，可以换成其他图片的。

小源丶同学

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
HTML表单优化

运用自己少的可怜的html+css+js知识，写了这么几个美化，提供源代码和美化后的结果给大家基础：HTML+CSS+JS文本框优化：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文本框美化&l
复制链接

扫一扫