最近遇到一个效果,查了一下发现是一个自己从未用过的html标签<fieldset>,举个例子
使用fieldset标签很简单::
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
遇见这个样式以后,我想起自己之前写过一个很相似的样式,
这里是三个input框,文字是根据定位写的,当input框为focus状态或input有value值时,文字就移动到上边框处,文字背景是一个高度只有2px的半透明白色,当input为blur状态或没有value值是,文字位于input同一行的位置;
html:
<div class="relative person-shou txt-chang">
<div class="little-txt">
收货人
<span> *</span>
</div>
<input name="shouhuo" class="info-input" type="text" value="" datatype="*" errormsg="收货人不能为空" />
</div>
<div class="connection relative txt-chang">
<div class="little-txt">
联系电话
<span> *</span>
</div>
<input name="lianxi" class="info-input info-phone" type="text" value="" datatype="m" errormsg="请填写正确的联系电话" />
</div>
<div class="relative txt-chang relive">
<div class="little-txt">
收货地址
<span> *</span>
</div>
<input name="shoudi" class="info-input address-info" type="text" value="" datatype="*" errormsg="请填写详细收货地址" />
</div>
css:
.relative {
position: relative
}
.address-info {
width: 450px;
}
.info-input {
height: 35px;
border-radius: 3px;
border: 1px solid #aaaaaa;
box-shadow: 0 0 2px 1px #cccccc inset;
padding: 1px 15px;
margin: 5px 0px 5px 5px;
font-size: 16px;
color: #000000;
z-index: 1;
}
.pro-info {
height: 35px;
border-color: #AAAAAA;
color: #666666;
}
.info-phone {
width: 270px;
}
.address-btn {
border-color: #AAAAAA;
}
.adre-la {
margin: 10px 0 10px 5px;
font-size: 14px;
color: #333333;
}
.adre-title {
margin-left: 5px;
margin-bottom: 25px;
}
.adre-shi {
width: 152px;
}
.adre-di {
margin: 5px 0px 5px 5px;
display: inline-block;
}
.adre-display {
display: inline-block;
}
.little-txt {
color: #666666;
position: absolute;
left: 20px;
opacity: .9;
padding: 0px 5px;
font-size: 16px;
top: 13px;
}
.little-txt:before {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 2px;
top: 7px;
left: 0;
background: #fff;
}
.person-shou {
width: 210px;
}
.little-txt>span {
color: #DD5555;
}
jquery:
$(".txt-chang").on("click", function() {
if($(this).find(".info-input").blur()) {
$(this).find("input").focus();
}
})
$(".info-input").focus(function() {
$(this).siblings(".little-txt").stop().animate({
"font-size": "12px",
"top": "-3px"
}, 200);
$(this).siblings(".little-txt").addClass("little-txt:before");
})
$(".info-input").blur(function() {
if($(this).val() == "") {
$(this).siblings(".little-txt").stop().animate({
"font-size": "16px",
"top": "13px"
}, 200);
$(this).siblings(".little-txt").removeClass("little-txt:before");
}
})