实现input元素（file类型）自定义外观的方法

html中，类型为file的input表单元素无法完美地通过属性自定义外观，因此可以用透明效果间接实现：

html：用一个父级元素包裹一个input和一个代替input的div元素：

<div class="container">
    <div class="replace">上传</div>
    <input type="file">
</div>

 css：通过透明效果和定位来隐藏input，同时用div代替input显示：

<style>
    .container {  /* 父级容器 */
      position: relative;
      width: 200px;
      height: 25px;
      margin: 100px auto;
      border: 2px dotted #f00;  /* 边框为展示需要，可删去 */
      overflow: hidden;
    }
    .replace {  /* 由于该元素在input下方，隐藏的input使它展现 */
      width: 200px;
      height: 25px;
      background-image: linear-gradient(white, lightgrey);
      text-align: center;
      border-radius: 5px;
    }
    input {
      position: absolute;  /* 将input通过定位覆盖父级元素，保证点击效果 */
      left: 0;
      top: 0;
      opacity: 0;  /* 将input透明度设为0以隐藏 */
    }
</style>

图中红色虚线标注了父级的位置，上传按钮（子元素div）的上方其实覆盖了一个透明的input，可以点击上传文件，只要将底下的div设置成自己想要的样式就可以了：

最后

以上就是耍酷煎蛋为你收集整理的实现input元素（file类型）自定义外观的方法的全部内容，希望文章能够帮你解决实现input元素（file类型）自定义外观的方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。