<fieldset>

最近遇到一个效果，查了一下发现是一个自己从未用过的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");
                }
            })