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

最新推荐文章于 2024-06-18 09:55:59 发布

赵海辛

最新推荐文章于 2024-06-18 09:55:59 发布

阅读量1.9k

点赞数

分类专栏： Css3 文章标签： html5 css3 input file css

本文链接：https://blog.csdn.net/zhaohaixin0418/article/details/74295522

版权

Css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近有好几个朋友问过，这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" οnchange="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>

当然，我是为了方便让大家理解思路，具体样式啊，value什么的，我就不说了，自己按照自己的习惯要求改就可以了。最后完成后如下：

点击上传文件，选择文件，然后旁边的input显示文件……

赵海辛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
修改input的file控件的样式，但是不修改他本身的属性

最近有好几个朋友问过，这file怎么把未选择文件去掉，或者问，怎么修改选择文件那四个字。。。so，我就写出来喽。当然，我只是说方法，具体你们想长成什么样，你们自己修改即可。。其实，一看就会觉得，搜迪斯奈如此简单。。。代码如下： style> .text{ width: 100px; display: block; border:1px solid red; heigh
复制链接

扫一扫

专栏目录