CSS - 选择器应用（自定义复选框 & 单选框）

最新推荐文章于 2024-01-26 16:09:53 发布

耳东蜗牛

最新推荐文章于 2024-01-26 16:09:53 发布

阅读量2.7k

点赞数 1

分类专栏： CSS 文章标签： CSS自定义复选框 CSS自定义单选框

本文链接：https://blog.csdn.net/It_rod/article/details/80450779

版权

CSS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

当CSS 最初出现时，它对表单元素的样式控制力是极为有限的，而且现在仍然没有哪个CSS 规范明确定义了这方面的行为。不过这些年来，各种浏览器已经在逐步放开CSS 属性对表单控件的作用范围，从而允许我们设置大多数表单控件的样式。不幸的是，复选框和单选框不在此列。直到今天，这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            input[type="checkbox"] {
                background: blue;
            }
        </style>
    </head>  
    <body>  
        <input type="checkbox" id="awesome" checked />
        <label for="awesome">自定义复选框</label>
    </body>  
</html>

先看一下当前的复选框的样式，chorme浏览器默认样式。而且我们定义的背景颜色是没有应用到复选框的样式。但是目前我们想要自定义复选框的样式。

解决方案

通过前一章的学习，我们得到了一个新的伪类:checked。这个伪类只在复选框被勾选时才会匹配，不论这个勾选状态是由用户交互触发，还是由脚本触发。如果直接对复选框设置样式，那么这个伪类并不实用，因为（前面已经交待过了）没有多少样式能够对复选框起作用。不过，我们倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。

替换元素和不可替换元素

替换元素

替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select><object>。
替换一般有内在尺寸即img默认的是其图片的宽高，input也有默认的尺寸。img和input的宽高可以设定。

不可替换元素

即将内容直接表现给用户端

Process

其实有一个元素总是跟复选框形影不离、息息相关，它就是<label>（标签元素）。当<label> 元素与复选框关联之后，也可以起到触发开关的作用。

由于label 不是复选框那样的替换元素，我们可以为它添加生成性内容（伪元素），并基于复选框的状态来为其设置样式。

然后，就可以把真正的复选框隐藏起来（但不能把它从tab 键切换焦点的队列中完全删除），再把生成性内容美化一番，用来顶替原来的复选框！

(1) 首先利用伪元素:bofore添加一个“复选框”

<style>
    input[type="checkbox"] + label::before {
		content: '\a0'; /* 不换行空格 */
		display: inline-block;
		vertical-align: .2em;
		width: .8em;
		height: .8em;
		margin-right: .2em;
		border-radius: .2em;
		background: silver;
		text-indent: .15em;
		line-height: .65;
	}
</style>

可以看到当前的复选框模型已经有了。

(2) 给复选框的勾选状态加上不同的样式。样式可以很简单，比如换种颜色，再加上勾选标记

<style>
    input[type="checkbox"] + label::before {
        content: '\a0'; /* 不换行空格 */
        display: inline-block;
        vertical-align: .2em;
        width: .8em;
        height: .8em;
        margin-right: .2em;
        border-radius: .2em;
        background: silver;
        text-indent: .15em;
        line-height: .65;
    }

    input[type="checkbox"]:checked + label::before {
        content: '\2713'; /*添加勾选状态*/
        background: yellowgreen;
    }
</style>

(3) 隐藏原来复选框

我们需要把原来的复选框以一种不损失可访问性的方式隐藏起来。这意味着不能使用display: none，因为那样会把它从键盘tab 键切换焦点的队列中完全删除。我们改用另一种方法来达到目的:

<style>
    input[type="checkbox"] + label::before {
        content: '\a0'; /* 不换行空格 */
        display: inline-block;
        vertical-align: .2em;
        width: .8em;
        height: .8em;
        margin-right: .2em;
        border-radius: .2em;
        background: silver;
        text-indent: .15em;
        line-height: .65;
    }


    input[type="checkbox"]:checked + label::before {
        content: '\2713';
        background: yellowgreen;
    }


    input[type="checkbox"] {
        position: absolute;
        clip: rect(0,0,0,0);
    }
</style>