css input[type=file] 样式美化 (radio checkbox类似)

最新推荐文章于 2023-09-09 22:45:42 发布

erciyuan_nuonuo

最新推荐文章于 2023-09-09 22:45:42 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： html css upload type-file 上传文件

本文链接：https://blog.csdn.net/erciyuan_nuonuo/article/details/72716410

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在做input文本上传时，由于html原生的上传按钮比较丑，需要对其进行美化

主要想到以下几种方法，欢迎大家补充

1. 通过position和opacity实现

input的透明度设置为0，设置为绝对定位，size足够大
input外面套一层a或div等标签（此处以a举例），a设置为相对定位，为了避免在非a区域点击打开选择文件,a需要设置overflow: hidden

<html>

<head>
  <style>
    .ui-upload {
      font-size: 14px;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      position: relative;
      cursor: pointer;
      color: #fff;
      background: #00abff;
      border-radius: 3px;
      overflow: hidden;
      display: inline-block;
      text-decoration: none;
    }

    .ui-upload input {
      position: absolute;
      font-size: 100px;
      right: 0;
      top: 0;
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer
    }
  </style>
</head>

<body>
  <a href="javascript:;" class="ui-upload">
    <input type="file" />upload
  </a>
</body>

</html>

2. label标签的for属性实现

for 属性规定 label 与哪个表单元素绑定，包含显式联系和隐式联系两种

显式联系：

以显式形式和控件联系起来，for属性的值要和控件的id保持一致

<label for="upload">upload</label>
<input type="file" id="upload" />

隐式联系：

在 <label> 标签中放入控件隐式地连接起来

<label>uplaod<input type="file" /></label>

<html>

<head>
  <style>
    .ui-upload {
      height: 30px;
      width: 80px;
      background-color: #00abff;
      font-size: 14px;
      line-height: 30px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 3px;
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <label for="upload" class="ui-upload">upload</label>
  <input type="file" id="upload" style="display: none;" />
  <label class="ui-upload">upload<input type="file" style="display: none;" /></label>
</body>

</html>

3. 通过onclick事件获取input操作

<html>

<head>
  <style>
    .ui-upload {
      height: 30px;
      width: 80px;
      background-color: #00abff;
      font-size: 14px;
      line-height: 30px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 3px;
      border: 0px;
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <button class="ui-upload" onclick="document.getElementById('upload').click()">upload</button>
  <input type="file" id="upload" style="display:none;" />
</body>

</html>