纯css美化复选框、单选框、下拉列表、file文件上传器

最新推荐文章于 2023-12-28 19:58:11 发布

young_Emily

最新推荐文章于 2023-12-28 19:58:11 发布

阅读量1.3w

点赞数 4

分类专栏： css

本文链接：https://blog.csdn.net/young_Emily/article/details/75258520

版权

本文介绍了如何使用纯CSS来美化复选框、单选框、下拉列表和file文件上传器，包括隐藏原始样式、添加自定义设计、利用label和伪元素实现交互效果，以及如何处理禁用和选中状态。还提到了下拉列表箭头的替换方法以及file上传按钮的美化技巧。

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

大家都知道，实现复选框，单选框，下拉列表很简单，html里有写一两行代码就可以出效果，但是美中不足的是默认的样式很丑陋，如下。

    <input type="radio" id="test" name="radio"> /*单选框*/
    <input type="checkbox" id="test2" name="checkbox" />/*多选框*/
    <select name="sel">/*下拉列表*/
        <option value="2011" selected="selected">2011年</option>
        <option value="2012">2012年</option>
        <option value="2013">2013年</option>
    </select>

原始效果图：这里写图片描述

作为一名有追求的前端攻城狮，是绝对不能满足甚至容忍此的。
于是开始了足之舞之手之蹈之的美化之路。
Html部分：

        <form class="checkchoose" action="#"> <!--表单-->
            <!--选项一-->
            <div class="wrapper"">
                <div class="checkbox-box">
                    <input name="box1" type="checkbox" id="check01" />
                    <span>√</span>
                </div>
                <label for="check01" style="font-size:15px;">选项一</label>
            </div>

            <!--选项二-->
            <div class="wrapper">
                <div class="checkbox-box">
                    <input name="box2" type="checkbox" id="check02"  />
                    <span>√</span>
                </div>
                <label for="check02" style="font-size:15px;">选项二</label>
            </div>

        </form>

这里写图片描述

思路：（去掉默认样式—>外层包裹一个div，美化div—>实际上点的还是默认框）
1. 原始input 隐藏，input外面的checkbox制定长宽，以border画一个框。
2. span定位绑缚于现任框（checkbox上面），且调整√的样式，旋转；
input框还是要存在滴，只是隐藏了，当点击现任框的时候实际上还是点的这个input框，因此样式：隐藏且层级最高;
3. 用户点击交互通过span的√是否显现体现。
4. 对了，还有很重要也很容易忽视的一点。用户选择的时候不一定非要点击当前框进行选择，更人性化的考虑是可以点后面的文字即lable然后前面的框实现自动勾选。
这里能否实现呢?
哈哈，答案是肯定的。