自定义input[type=file]上传按钮样式的四种方案，你知道几种？ |
您所在的位置：网站首页 › input输入框type › 自定义input[type=file]上传按钮样式的四种方案，你知道几种？ |
自定义input[type=file]上传按钮样式的四种方案，你知道几种？
|
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 前言最近在制作公司官网的时候，遇到了上传文件按钮。这玩意真的恶心啊。因为没有用框架，在谷歌浏览器中，这家伙长这样，属实是难看啊 因为以前用的都是框架内的自带的上传组件，第一次自己手写，真的是没经验！ 我天真的直接在input上进行了修改。最后却是下面的结果，不说了，基础真的差！！！ input[type="file"]{ color: red; padding: 20px; } 复制代码这种方案的核心其实是利于其他元素覆盖input。宽度一致，通过z-index来设置上下位置。 实现 创建一个容器,容器设置固定的宽度，这样子元素继承容器的宽度，想修改宽度只需要修改容器宽度。 .upload-container { position: relative; width: 150px; text-align: center; } 复制代码 定义一个其他元素，这里我使用的是p，注意这里z-index是0.； 上传文件 .upload-container p { z-index: 0; width: 100%; background: #00bfff; color: #fff; padding: 10px 0; font-size: 12px; } 复制代码可以考虑一下，z-inde对调，该怎么实现！！！ 方案2 display:none这种方案跟第一种方案相比，实现起来更简单！很多牛的组件库用的也是这种方案，例如Element也是这样做的。 实现的思路其实和第一种一样，样式其实还是放在其他元素上面，由于display:none，不需要考虑input。 这种方案，目前也是存在两种方法，主要的差别是这里的其他元素的选择！ 样式元素选择 ：label 上传文件 |
【本文地址】
今日新闻 |
推荐新闻 |