MICUU
心情
所有
图集
登录
搜索
原创
css中利用label标签来优化文件上传按钮input type=file
米醋儿
发布于:2023-07-14
今天得空来优化一下页面，主页上的图片上传按钮一直不够美观，因为是原生的上传按钮，我们利用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
掘金
更多>
