input,type="file"的样式修改

最新推荐文章于 2023-07-12 16:35:20 发布

mister_snail

最新推荐文章于 2023-07-12 16:35:20 发布

阅读量2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Mister_SNAIL/article/details/78044518

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

input,type=”file”的样式修改

1.样式
这里写图片描述
2.dom

 <div class="costs-uploadfile-div">                             
    <input type="file" name="file" id="fileField"  onchange="document.getElementById('textfield').value=this.value" /> 
    <input type='text' id="textfield" /> 
    <button class="allBtn costs-marl15">浏览</button>
    <button class="allBtn costs-marl15">上传</button>
</div>

3.css

.costs-marl15{margin-left: 15px;}
div.costs-uploadfile-div{
    position:relative;
}
div.costs-uploadfile-div #textfield{
    width:150px;
    height:30px;    
}
div.costs-uploadfile-div #fileField{
    width:245px;
    height:30px;    
    position: absolute;
    top: 0;
    left:0;
    filter: alpha(opacity:0);
    opacity: 0;
}
div.costs-uploadfile-div .allBtn{
    padding:0;
    margin:0;
    height: 30px;
    line-height: 30px;
    width: 80px;
    background-color: #18b3cf;
    border: none;
    color: #fff;
    }