美化复选框（给复选框添加样式）_textrenderdata设置边框颜色-优快云博客

本文介绍了如何使用CSS来美化复选框，包括改变背景颜色等样式，提供了在线演示和本地代码下载，帮助读者实现自定义的复选框设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

复选框的背景颜色都是可以更改，具体参考css样式来更改。

html:

<input type="checkbox" id="awesome" autofocus /><!--自动获得焦点  -->
<label for="awesome">Awesome!</label>
<br />
<input type="checkbox" id="awesome2" checked /><!-- 默认勾选 -->
<label for="awesome2">Awesome!</label>
<br />
<input type="checkbox" id="awesome3" disabled /><!-- 禁止勾选 -->
<label for="awesome3">Awesome!</label>
<br />
<input type="checkbox" id="awesome4" checked disabled /><!--默认勾选上，禁止勾选  -->
<label for="awesome4">Awesome!</label>

CSS：

<style>
    body { font: 150%/1.6 sans-serif;} 
    input[type="checkbox"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    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;
        background-color: red;
    }

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

    input[type="checkbox"]:focus+label::before {
        box-shadow: 0 0 .1em .1em #58a;
        background-color: pink;
    }

    input[type="checkbox"]:disabled+label::before {
        background: gray;
        box-shadow: none;
        color: #555;
        cursor: not-allowed;
    }
</style>