css input[type=file] input[type=radio] input[type=checkbox]样式美化，input上传按钮美化

最新推荐文章于 2022-10-24 16:39:57 发布

zhouweixue_vivi

最新推荐文章于 2022-10-24 16:39:57 发布

阅读量1.1k

点赞数

分类专栏： css样式控制文章标签： css html checkbox radio file

本文链接：https://blog.csdn.net/zhouweixue_vivi/article/details/78356413

版权

本文介绍了如何使用CSS美化HTML中的input[type=file]上传按钮、input[type=radio]和input[type=checkbox]。通过隐藏原始input元素，创建自定义布局并用JavaScript触发点击事件，实现上传按钮的美化。同时，利用伪类元素内容生成覆盖原有样式，改变radio和checkbox的显示效果。

摘要由CSDN通过智能技术生成

一、css input[type=file] 样式美化，input上传按钮美化

我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢

思路：

input file上传按钮的美化思路是，将input file从页面隐藏掉，然后使用div加button等元素模拟文件上传的选择框，最后使用js触发input file的点击事件

代码如下：

DOM结构：

   <div class="uploadDiv"> 
 
           <label class="input-label"><span class="Asterisk">* </span>上传文件:</label> 
 
             <div class="browseDiv" > 
 
                 <span>上传的文件名</span> 
 
                <button type="button" οnclick="lookup( )" class="liulan-btn">浏览</button> 
 
             </div> 
 
             <inp