修改input的file控件的样式，但是不修改他本身的属性

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

原创最新推荐文章于 2023-07-12 16:35:20 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #input #file #css

Css3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS自定义文件输入框的方法，通过隐藏原始文件输入框并用自定义样式替代，实现了更友好的用户体验。点击上传按钮后，用户选择文件，自定义的文本框将显示所选文件名。

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

最近有好几个朋友问过，这file怎么把未选择文件去掉，或者问，怎么修改选择文件那四个字。。。so，我就写出来喽。当然，我只是说方法，具体你们想长成什么样，你们自己修改即可。。其实，一看就会觉得，搜迪斯奈如此简单。。。代码如下：

  <style>
  .text{
  width: 100px;
  display: block;
  border:1px solid red;
  height: 30px;
  float: left;

  }
  .opacity{
  opacity: 0;
  }
  .file_btn{
  float: left;
  margin-left: -200px;
  }
  </style>
</head>
<body>
  <MyApp>Loading...</MyApp>
  <input type="file" onchange="document.getElementById('file1').value=this.value" class="text opacity">
  <input name="file_0" id="file1" value="" class="text">
  <input type="button" value="上传文件" class="file_btn">
</body>