作者:大帅哥鹏飞lyll | 来源:互联网 | 2023-05-27 13:34
我正在尝试使用CSS更改复选框的大小,颜色等.当我选中此框时,我将所有内容格式化为我想要的方式.选中此框后,检查/刻度标记不会出现,似乎没有任何结果.但是,我知道它的工作原理是因为我可以设置背景颜色来改变,然后就可以了.
添加"内容:'✔';" 在CSS中做任何我想要完成的事情,或者我是否正确地使用它?
例如:
input[type=checkbox]:checked {
content: '?';
background-color:white;
}
这是一个小提琴,演示了复选框更改的背景颜色.
这是我在选中复选框时使用复选标记尝试做的另一个小提琴.
编辑 - 我正在使用chrome,这似乎是个问题.我检查了Firefox,它的工作原理
知道了这一点,我能做些什么来完成我所描述的内容?
1> Josh Crozier..:
该content
属性目前仅适用于伪元素,如:before
/:after
.
众所周知,复选框元素很难设计(并非所有浏览器都允许您指定height
/ width
;而且,它们是自封闭的元素,这意味着它们不能包含伪元素.
因此,用于创建自定义的复选框中最常见的做法是隐藏的input
/ checkbox元素和风格成功label
通过伪元素的元素.例如:
利用相邻的兄弟组合器,+
以改变自定义的样式label
元素/伪元素:
input[type="checkbox"]:checked + label {}
这里的例子
这将帮助您入门.相应的风格.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
display: inline-block;
border: 1px solid #000;
width: 30px;
height: 30px;
position: relative;
}
input[type="checkbox"]:checked + label:after {
content: '?';
display: inline-block;
font-size: 1.6em;
}