重写input file上传样式

RightHereWaitingFY

于 2020-11-07 13:51:25 发布

阅读量480

点赞数

CC 4.0 BY-SA版权

分类专栏： Css

本文链接：https://blog.youkuaiyun.com/luyundesign/article/details/109546104

Css 专栏收录该内容

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>