米
首页
心情
图集
所有
搜索
登录
css中利用label标签来优化文件上传按钮input type=file
2023-07-14
80.53w热度
今天得空来优化一下页面，主页上的图片上传按钮一直不够美观，因为是原生的上传按钮，我们利用label标签达到美化效果。 > HTML <label> 元素（标签）表示用户界面中某个元素的说明。 官方是这样解释的，个人理解就是 label 标签可以用 for 关联，让 label 拥有被关联标签的属性。 <label class="mcr-btn" for="submitBtn">上传图片</label> <input type="file" id="submitBtn" class=" mgt15" type="submit" /> 这这样，点击 label 就拥有了input标签的属性，我们直接将input标签因此即可，然后优化 label 的样式达到美化上传按钮 input 的样式。 css ``` input[type=file]{ opacity: 0; } .mcr-btn { background-color: #f04142; color: #fff; border: none; display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; } ``` 美化完成。
注:原创不易,转载请注明出处(
https://micuu.com/new/3490.html
)，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。
最后修改与 2023-07-14
上一篇：
开启xdebug教程
下一篇：
一个好用的轮子 turn.js 实现仿真...
▶
珍藏视频
▶
10分钟高效燃脂
▶
30天高效瘦脸操
▶
5分钟缓解颈椎操
友人
→
微博
→
全民K歌
→
唱吧
→
今日头条
→
悠悠网
→
科技小锅盖
→
彼岸桌面
→
阮一峰
→
laravel社区
→
V2ex
→
掘金
+
更多
