前端-有关form表单

点击图片实现input=”file”效果

思路：设置input type=”file“ 的元素同图片的宽、高相同，并且覆盖在图片上面，将input type=“file” 元素的透明度设置为0
注意：如果按照上面做，ie浏览器需要双击才能出现选择框，解决办法是 设置 input type=“file” 的height：130%；将字体放大 font-size:100px;就可以解决该问题。

<div class="right-item img-info">
    <input type="file" name="applyer-img" id="applyer-img" class="applyer-img" value="" />
    <div class="upload-img">                                            
        <div class="upload-tip">
            <span id="">
                上传图片
            </span>
        </div>
    </div>
    <p>请上传300*380像素的图片</p>
</div>

css样式设置如下：

.img-info{
    width:300px;
    height:443px;
    margin-right:38px;
    position:relative;
}

.upload-img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:380px;
    background:url(../images/recruit/upload_img_bg.png) no-repeat center  center;

}

.upload-tip{
    width:150px;
    height:130px;

    background:url(../images/recruit/upload_tip_bg.png) no-repeat center center;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

.upload-tip span{
    display:inline-block;
    width:60px;
    height:60px;
    color:#de0317;
    font-size:28px;
    font-weight:600;
    margin-top:42px;
    margin-left:43px;
}

.applyer-img{
    font-size:100px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:130%;
    z-index:99;
    opacity: 0; 
    filter:alpha(opacity=0); 
    cursor:pointer; 
}

.img-info p{

    color:#fff;
    font-size:22px;
    font-weight:600;
    text-align:center;
    width:100%;
    line-height:44px;

    position:absolute;
    bottom:19px;
}

input 框做select框时，禁止输入内容

将input框的readonly属性设置为”readonly”，（readonly=”readonly”）