css复选框红色
时间: 2023-07-23 07:18:06 浏览: 56
要将复选框的颜色设置为红色,可以使用CSS样式来实现。具体的代码如下:
```css
input[type="checkbox"] {
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width: 20px;
height: 20px;
border: 1px solid red;
}
input[type="checkbox"]:checked:before {
content: "\2713";
font-size: 16px;
color: red;
position: absolute;
top: 0;
left: 4px;
}
```
这段代码将复选框的外观样式设置为无,然后使用红色边框来代替默认的复选框。当复选框被选中时,使用伪元素:before来添加一个红色的勾号。
相关问题
pyqt6复选框样式
PyQt6中的复选框样式可以通过QCheckBox类的样式表进行设置。可以使用CSS语法来设置复选框的样式,例如设置复选框的背景色:
```
QCheckBox::indicator:checked {
background-color: red;
}
```
这个样式会将选中的复选框的背景色设置为红色。可以通过设置其他CSS属性,如border、color等,来进一步自定义复选框的样式。
以下是一个示例程序,展示如何设置复选框样式:
```python
from PyQt6.QtWidgets import QApplication, QWidget, QCheckBox, QVBoxLayout
app = QApplication([])
window = QWidget()
checkbox1 = QCheckBox("Checkbox 1")
checkbox2 = QCheckBox("Checkbox 2")
checkbox3 = QCheckBox("Checkbox 3")
# 设置复选框样式
checkbox1.setStyleSheet("""
QCheckBox::indicator:checked {
background-color: red;
}
""")
checkbox2.setStyleSheet("""
QCheckBox::indicator:checked {
border: 2px solid green;
}
""")
checkbox3.setStyleSheet("""
QCheckBox::indicator:checked {
color: blue;
}
""")
layout = QVBoxLayout()
layout.addWidget(checkbox1)
layout.addWidget(checkbox2)
layout.addWidget(checkbox3)
window.setLayout(layout)
window.show()
app.exec()
```
运行该程序后,会显示出三个复选框,分别设置了不同的样式。
复选框对勾颜色设置
复选框对勾的颜色可以通过 CSS 样式来设置。具体做法是在 CSS 中设置伪元素 ::before 或 ::after 的 content 为 "\2714",表示 Unicode 编码的对勾符号,然后再设置对勾颜色。
例如,以下 CSS 代码可以将复选框对勾的颜色设置为红色:
```
input[type="checkbox"]:checked::before {
content: "\2714";
color: red;
}
```
其中,input[type="checkbox"]:checked 选择器用于选中已勾选的复选框,::before 伪元素用于在复选框前插入内容,\2714 是 Unicode 编码的对勾符号,color 属性设置了对勾颜色为红色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)