改造input

2021-03-27 09:04:14 作者：互联网

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>改造input</title>
 <style></style>
 </head>
 <body>
 <input type="checkbox" name="" id="" />
 <input type="file" />
 <hr />
 <!-- 
 方法1: 点击label相当于点击了input
 -->

 <style>
 .checkbox1 {
 	display: none;
 }

 .checkbox1 + i {
 /* content: " "; */
 display: inline-block;
 font-style: normal;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #c0c0c0;
 }

 .checkbox1:checked + i {
 background-color: hotpink;
 }

 .checkbox1 + i::after {
 }

 .checkbox1:checked + i::after {
 content: " ";
 display: inline-block;
 margin: 5px;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background-color: #c0c0c0;
 }
 </style>
 <label>
 <input type="checkbox" class="checkbox1" />
 <i></i>
 </label>

 <!-- 方法2: 设置input的opacity为0, 定位方式为绝对定位 -->
 <style>
 .btn {
 position: relative;
 display: inline-block;
 text-align: center;
 color: #fff;
 text-decoration: none;
 width: 80px;
 height: 32px;
 line-height: 32px;
 background: #409eff;
 border-radius: 3px;
 font-size: 12px;
 vertical-align: middle;
 margin-left: 10px;
 }
 input[name="file"] {
 opacity: 0;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 }
 </style>
 <a href="javascript:void(0)" class="btn">
 上传文件
 <input type="file" id="file" name="file" @change="uploadFile" />
 </a>
 </body>
</html>

标签：color,改造,height,width,background,checkbox1,input,display
来源： https://blog.csdn.net/qq_43248623/article/details/115259666