css input[type=file]样式美化

100人浏览 2024-09-16 11:15:08

input[type=file]是上传文件离不开的标签元素，但是默认样式太丑，完全不符合前端人对审美的需求，今天就来教大家如何改造默认样式。

首先给input[type=file]标签包装一个外围容器，这里我使用span元素，当然其他元素也可以。

代码如下：

<span id="uploadBtn">选择文件

</span>

接下来的事情交给css来搞定

代码如下：

#uploadBtn{

display:inline-block;

position: relative;

color: #fff;

background-color: #1989fa;

border-color: #1989fa;

padding: 0 30px;

font-size: 14px;

line-height: 42px;

font-weight: 500;

-webkit-transition: all .15s;

transition: all .15s;

padding: 0 15px;

line-height: 32px;

border-radius: 4px;

}

.file{

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

opacity: 0;

}

接下来就是效果展示了：

相关推荐