工作生活

3. input的file样式的美化

2019-07-02  本文已影响0人  chan_it
  1. label + display:none
<style>
  #file1{
    display: none;
  }
</style>

<body>
  <label><input type="file" name="" id="file1">请选择文件</label>
</body>
  1. 定位 + opacity
<style>
  .file{
    position: relative;
  }
  input{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .file-label{
    color: #999;
  }
  .file:hover .file-label{
    color: #09f;
  }
</style>

<body>
  <div class="file">
    <div class="file-label">请选择文件</div>
    <input type="file" name="" id="file1">
  </div>
</body>
上一篇下一篇

猜你喜欢

热点阅读