怎样改变checkbox的默认蓝色

Posted 2023-05-05

参考技术A 可以使用CSS来改变checkbox的默认外观。CSS属性input[type="checkbox"]background-color: #FFFFFF;可以将checkbox的颜色改变为白色。 参考技术B 可以使用以下方法改变checkbox的默认蓝色：

1. 使用CSS的伪类选择器来改变checkbox的样式，代码如下：

```
input[type="checkbox"]
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
width: 20px;
height: 20px;


input[type="checkbox"]:checked
background-color: #f00;

```

2. 指定checkbox的样式，然后修改其中的样式属性，代码如下：

```
<style>
.chk-custom
width: 15px;
height: 15px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;


.chk-custom:checked
background-color: #f00;

</style>

<input type="checkbox" class="chk-custom">
```

其中 `chk-custom` 是自定义的样式名称。 参考技术C 您可以直接在XML中更改颜色.使用buttonTint的盒:(如API等级23)

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="@color/CHECK_COLOR" />
您也可以使用appCompatCheckbox v7较旧的API级别执行此操作:

<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="@color/COLOR_HERE" /> 参考技术D 您可以通过CSS来改变checkbox的默认蓝色。首先，您需要使用伪类选择器来选中checkbox的不同状态，例如未选中、选中、鼠标悬停等。然后，您可以使用CSS属性来改变checkbox的颜色，例如background-color、border-color等。
以下是一个示例代码，用于将未选中的checkbox的颜色改为红色，选中的checkbox的颜色改为绿色，鼠标悬停时的颜色改为黄色：
input[type="checkbox"]:not(:checked)
background-color: red;

input[type="checkbox"]:checked
background-color: green;

input[type="checkbox"]:hover
background-color: yellow;

请注意，这只是一个示例代码，您可以根据自己的需要进行修改和调整。另外，不同浏览器对checkbox的样式支持不同，您可能需要使用一些hack来兼容不同的浏览器。
希望这个回答对您有所帮助！ 第5个回答  2023-03-13 可以使用CSS来更改checkbox的默认蓝色。首先，你需要定义一个类，用于更改checkbox的外观，然后在CSS文件中添加代码：
input[type='checkbox']
background-color: #your-color;
border-color: #your-color;

然后，你可以分配类到checkbox，就像这样：
<input type="checkbox" class="your-class" />
这样，你就可以更改checkbox的默认蓝色。

改变默认的多选框 checkbox 样式~

 效果图：

 

HTML代码：

<label for="Checkbox1" style="display:none;"></label>
<input type="checkbox" id="Checkbox1" value="option1" class="input_check">

 

CSS代码：

/* 复选框checkbox */
.input_check {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
}
/* 未选 */
.input_check{
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 18px;
    height: 18px;
}
input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus{
    outline: none;    /* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。*/
}
/* 鼠标滑过未选 */
 input[type=file]:hover, input[type=checkbox]:hover, input[type=radio]:hover{
    border-color: #3bb8f6;
} 
/* 已选 */
.input_check:checked {
    display: inline-block;
    background-image: url(‘../../../assets/img/checkbox2.png‘);
    background-repeat: no-repeat;  
    background-position: 0px 0px; 
    width: 18px;
    height: 18px;
    border: none;
} 
/* 鼠标滑过已选 */
.input_check:checked:hover{
    display: inline-block;
    background-image: url(‘../../../assets/img/checkbox1.png‘);
    background-repeat: no-repeat;  
    background-position: 0px 0px; 
    width: 18px;
    height: 18px;
    border: none;
    outline: none;
}