重写input file上传样式

最新推荐文章于 2023-03-04 12:50:39 发布

原创最新推荐文章于 2023-03-04 12:50:39 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

Css 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种用于文件上传按钮的CSS样式实现方案。通过定义特定的CSS样式，可以让文件选择输入框具有统一且美观的外观，并确保用户能够方便地进行文件选择操作。

<style type="text/css">
  .fileinput-button {
  position: relative; display: inline-block; overflow: hidden; display: block; width: 130px;
  height: 30px; border: 1px solid #c5c5c5; line-height: 30px; font-size: 14px;
}
.fileinput-button input{
  position: absolute; left: 0px; top: 0px; opacity: 0; -ms-filter: 'alpha(opacity=0)';
}
</style>

<span class="fileinput-button">
  <span>加载附件</span>
  <input type="file">
</span>