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

最新推荐文章于 2023-02-14 11:21:37 发布

m0_67193261

最新推荐文章于 2023-02-14 11:21:37 发布

阅读量419

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/m0_67193261/article/details/124237645

版权

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