CSS美化html文件上传按钮的方法

发布时间：2023-01-01 06:41:39 来源：网络

.

那浓雾，抓一把，软绵绵；吸一口，甜津津；踩一脚，轻悠悠。既然都是风景，何必纠结与下不去的站，互不干扰，各自安好。

写了一个带有表单的html页面，发现原生的 input 文件上传输入框样式太丑了，就琢磨着自己写个美化的样式，下面就是 html input 文件上传样的美化方法，单纯的只用CSS实现，很简单的。

CSS 美化input上传按钮样式的方法

美化实现逻辑：

1、用 div 元素写一个美化的上传按钮

2、将 input 上传按钮的透明度设置为 0 ，并将其绝对定位到 div 元素上方即可

先上示例演示图片：

CSS 美化input上传按钮样式的方法

示例代码：

<style>
.filediv{
    position: relative;
}
.filediv input{
    opacity: 0;
    width: 100px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}
.filediv div{
    height: 35px;
    line-height: 35px;
    background-color: #03a9f4;
    color: #fff;
    width: 100px;
    text-align: center;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
}
</style>
<!--  http://feiniaomy.com -->
<form name="form1" id="form1">
    <div class="filediv">
        <input type="file" id="btn_file" name="file"></input>
        <div>上传文件</div>
    </div>
</form>

以上就是CSS美化html文件上传按钮的方法。谁卑微了承诺，放肆了寂寞，又丢下了我。更多关于CSS美化html文件上传按钮的方法请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章: