當input中的type值為file時，各瀏覽器的表現形式不同
阿新 • • 發佈：2017-09-27
button tex ati color 不同 ack 需要 標簽 圖片
如果想使各瀏覽器下的表現形式相同，需要對該input元素隱藏，然後再改元素下方添加標簽。其html寫法如下
<div class="input-file"> <input type="file" name="postImg" value="上傳圖片" id="upload" class="file-button"> <label class="file-button-img">上傳封面</label> </div>
css布局如下
.input-file{
display: inline-block;
height:50px;
width: 120px;
/*background-color: #56F06F;*/
text-align: center;
cursor: pointer;
position:relative;
}
.file-button{
opacity: 0;
position: absolute;
left:0;
top:0;
width:120px;
height: 50px;
}
.file-button-img{
line-height: 50px;
text-align: center;
display: inline-block;
margin-top: 5px;
color:#fff;
font-size: 18px;
width:100%;
height:100%;
display: block;
cursor:pointer;
background-color: #3EF5B1;
}當input中的type值為file時，各瀏覽器的表現形式不同