<!DOCTYPE html> <html lang="zh"> <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 file 样式更改</title> <style> * { padding: 0; margin: 0; } .uploadImg { display: inline-block; /*相对定位*/ position: relative; width: 140px; font-size: 16px; color: #007fcb; margin-top: 10px; overflow: hidden; } .file { /*绝对定位*/ position: absolute; z-index: 100; /*透明度为0-------关键设置*/ opacity: 0; filter: alpha(opacity=0); width: 140px; cursor: pointer; } .uploadImg a { font-size: 16px; color: #007fcb; } </style> </head> <body> <span class="uploadImg"> <input type="file" class="file" size="1" > <a href="#">上传图片</a> </span> </body> </html>
效果：
