【<input type="text'>输入框闪烁 _表单元素】

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

表单元素

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport", content="device-width,initial-scale=1.0, manimun-scale=1.0,user-scaleble=no" />
	<title>task10</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
	<div class="head-t">
		<div class="ht-box">
			<div class="ht-left">
				客服热线：010-8888-8888
			</div>
			<div class="ht-right">
				<a class="ht-link" href="#">登录</a><a class="ht-link" href="#">注册</a>
			</div>
		</div>
	</div>
	<div class="head-b">
		<div class="hb-box">
			<button class="hb-btn" type="button">首页</button>
			<button class="hb-btn" type="button">在线定制</button>
			<button class="hb-btn" type="button">标准箱</button>
			<button class="hb-btn" type="button">品质保障</button>
		</div>
	</div>
</header>
<main>
	<div class="main-t">
		<div class="mt-box">
			<div class="bar">
				<span>1</span>
				<p>1.定制纸箱</p>
			</div>
			<div class="bar">
				<span>2</span>
				<p>2.选择数量</p>
			</div>
			<div class="bar">
				<span>3</span>
				<p>3.上传附件</p>
			</div>
			<div class="bar">
				<span>4</span>
				<p>4.确认下单</p>
			</div>
		</div>
	</div>
	<div class="main-b">
		<div class="mb-box">
			<p><span>|</span>请按照以下步骤来定制纸箱</p>
			<form name="box" method="post" action="save.php">			
				<div class="label-box">
					<label><img src="ico1.png" />选择箱型</label>
				</div>
				<div class="input-box">
					<span><input type="radio" name="one" id="box-type1">
						<label for="box-type1">对口箱</label></span>
					<span><input type="radio" name="one" id="box-type2">
						<label for="box-type2">飞机箱</label></span>
					<span><input type="radio" name="one" id="box-type3">
						<label for="box-type3">天地盖</label></span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="label-box">
					<label><img src="ico2.png" />确定尺寸</label>
				</div>
				<div class="input-box">
					<span><input type="radio" name="two" id="box-size1">
						<label for="box-size1">外径</label></span>
					<span>长 <input type="text" class="size"> mm</span>
					<span>宽 <input type="text" class="size"> mm</span>
					<span>高 <input type="text" class="size"> mm</span>
					<br />
					<span><input type="radio" name="two" id="box-size2">
						<label for="box-size2">内径</label></span>
					<span>长 <input type="text" class="size"> mm</span>
					<span>宽 <input type="text" class="size"> mm</span>
					<span>高 <input type="text" class="size"> mm</span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="label-box">
					<label><img src="ico3.png" />选择材质</label>
				</div>
				<div class="input-box second-intput-box">
					<span><input type="radio" name="three" id="box-material1">
						<label for="box-material1">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material2">
						<label for="box-material2">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material3">
						<label for="box-material3">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material4">
						<label for="box-material4">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material5">
						<label for="box-material5">三层A瓦优质</label></span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="submit-box">
					<input type="submit" value="下一步">
				</div>
			</form>
		</div>
	</div>
</main>
<footer>
	<div class="foot-t">
		<div class="ft-box">
			<div class="ft-l">
				51包装网——纸箱包装首选服务平台
			</div>
			<div class="ft-m">
				<a class="ft-link" href="#">关于我们</a>
				<a class="ft-link" href="#">配送流程</a>
				<a class="ft-link" href="#">联系我们</a>
				<a class="ft-link" href="#">下单指南</a>
				<a class="ft-link" href="#">媒体介绍</a>
			</div>
			<div class="ft-r">
				<img src="wx.png" />
				<p>TEL:400-000-000</p>
				<p>企业QQ:123456789</p>
				<P>微信:XXXXXXX</P>				
			</div>
	</div>
	<div class="foot-b">
		<div class="fb-box">
			  北京五一包装科技有限公司Copyright ©2015 51baozhuang.com015 All rights reserved.    京icp备99999999-1 
		</div>
	</div>
</footer>
</body>
</html>

html{
	font-size:625%;
	margin:0;
	padding:0;
}
body{
	margin:0;
	padding:0;
	min-width:320px;

}
/*中间宽度*/
.ht-box,.hb-box,.mt-box,.mb-box,.submin-box,.ft-box,.fb-box{
	width:90%;
	max-width:1200px;
	margin:0 auto;
}
@media screen and (max-width:767px) {
    .ht-box,.hb-box,.mt-box,.mb-box,.submin-box,.ft-box,.fb-box{
        width:99%;
        margin:0 auto;
    }
}
.ht-box{
	height:0.4rem;
	display:flex;
	justify-content:space-between;	
	align-items:center;
}

/*头部*/
.head-t{
	background:#1d7ad9;	
}

.ht-left{
	color:#fff;
	font-size:0.14rem;
}
.ht-right{
	height:100%;
	font-size:0.16rem;
}
a.ht-link{
	display:inline-block;
	height:100%;
	line-height:0.4rem;
	padding:0 0.1rem;
	text-decoration:none;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}
a.ht-link:link,a.ht-link:visited{
	color:#fff;
}
a.ht-link:hover{
	color:#000;
	background:#fff;
}
.head-b{
	background:#f9f9f9;
	font-size:0.16rem;
	text-align:right;
}
button.hb-btn{
	background:#fff;
	margin:0.26rem 0 0.26rem 0.6rem;
	padding:0.08rem;
	border:none;
	border-radius:5px;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;	

}
@media screen and (max-width:767px) {
    button.hb-btn{
        margin:0.26rem 0 0.26rem 0.3rem;
    }
}
@media screen and (max-width:500px) {
    button.hb-btn{
        margin:0.26rem 0 0.26rem 0.05rem;
    }
}
button.hb-btn:hover{
	background:#1d7ad9;
	border-color:none;
	color:#fff;
}
button.hb-btn:focus{
	outline:none;
}
/*进度条*/
.mt-box{
	display:flex;
	justify-content:flex-end;
	margin-top:0.5rem;
}
.bar{
	width:15%;
	height:0.05rem;
	font-size:0.14rem;
	border-radius:1px;
	background:#ccc;
	text-align:center;
	position:relative;
}
@media screen and (max-width:767px) {
    .bar{
        width:20%;
    }
}
@media screen and (max-width:767px) {
    .bar{
        width:25%;
    }
}
.bar span{
	display:inline-block;
	width:0.24rem;
	height:0.24rem;
	border-radius:100%;
	background:#ccc;
	line-height:0.24rem;
	position:relative;
	top:-0.1rem;
	color:#fff;
}
.bar:hover,.bar:hover span{
	background:#ff7f02;
}
.bar:hover p{
	color:#ff7f02;
}
.bar p{
	font-size:0.18rem;
}
@media screen and (max-width:500px) {
    .bar p{
        font-size:0.14rem;
    }
}
/*表单*/
.mb-box{
	font-size:0.18rem;
	margin-top:1rem;
}
.mb-box>p{
	font-size:0.22rem;
}
.mb-box>p>span{	
	color:#1d7ad9;
	font-weight:bold;
	padding:0 1px;
}
form{
	border:1px solid #e7e7e7;
	position:relative;
	word-wrap-:break-word;
}
.first-label{
	border:none;
}
.label-box{
	color:#1d7ad9;
	font-weight:bold;
	background:#f4f4f4;
	padding:0.14rem 0;
}	
.input-box{
	background:#fbfcff;
	padding:0.28rem 0;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
	position:relative;
	padding-right:1.4rem;

}
.input-box span{
	width:2rem;
	text-align:center;
	position:relative;
	display:inline-block;
}
.label-box img{
	position:relative;
	top:5px;
	margin:0 5px;
}
.size{
	width:0.7rem;
	margin:0.25rem 0.01rem;
}
.submit-box{
	text-align:center;
}
.submit-box input{
	color:#fff;
	width:1.8rem;
	font-size:0.24rem;
	padding:0.1rem 0.55rem;
	margin:1.4rem auto 1rem;
	border:none;
	background:#e15053;
	border-radius:5px;
}
select{
	position:absolute;
	right:0.1rem;
	top:50%;
	margin-top:-0.17rem;
	height:0.37rem;
	/*小三角*/
	appearance:none;
	-moz-appearance:none;
 	-webkit-appearance:none;
	background: url("shape.png") no-repeat right;
	padding:0px 0.4rem 0 0.2rem;
	background-position:95% 50%;
}
/*单选按钮*/
input[type=radio]{
    /*去除浏览器默认样式*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*自定义样式*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    border: 1px solid #1d7ad9;
    outline: none;
    cursor: pointer;
    /*设置为圆形，看起来是个单选框*/
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/**
* 单选框 选中之后的样式
**/
input[type=radio]:after{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #1d7ad9;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    /*增加一些动画*/
    -webkit-transition : all ease-in-out 300ms;
    -moz-transition : all ease-in-out 300ms;
    transition : all ease-in-out 300ms;
}
input[type=radio]:checked:after{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}


/*底部*/
.foot-t{
	color:#999;
	background:#f9f9f9;
}
.ft-box{	
	padding:0.6rem 0;
}
@media screen and (min-width:500px) {
    .ft-box{
        display:flex;
    }
}
.ft-l,.ft-m,.ft-r{
	width:30%;
	flex-grow:1;
	margin:0 0.4rem;
}
@media screen and (max-width:500px) {
    .ft-l,.ft-m,.ft-r{
        margin:0.5rem auto;
        text-align:center;
    }
}
.ft-l{
	font-size:0.18rem;
}
.ft-m{
	font-size:0.14rem;
}
a.ft-link{
	display:inline-block;
	width:1rem;
	text-align:center;
	text-decoration:none;
}
a.ft-link:link,a.ft-link:visited{
	color:#999;
}
a.ft-link:hover{
	color:#1d7ad9;
}
.ft-r{
	font-size:0.14rem;
}
.ft-r img{
	width:1rem;
	height:1rem;
}
@media screen and (min-width:992px) {
    .ft-r img{
        float:right;
    }
}
.ft-r p{
	margin-top:0;
}
.foot-b{
	color:#fff;
	font-size:0.12rem;
	text-align:center;
	padding:0.1rem;
	background:#1d7ad9;
}

编辑于2024-11-18

时间排序

热门排序

[北京|结业弟子]JS-肖明明
1

这应该是浏览器的问题，不是你代码的问题，我的页面用chrome看也有这个问题，但过段时间再看，又正常显示了

查看全部>

编辑于2019-05-24

去第页