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

最近有好几个朋友问过,这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显示文件……

你可能感兴趣的:(Css3)