↙️ 🛁 👎🏾 使用CSS3设置复选框和单选按钮的样式 🐔 ✏️ 💑

在为HTML表单创建CSS样式时，开发人员经常面临无法直接更改复选框和单选按钮外观的问题。让我们看看如何使用CSS3工具而不使用任何JavaScript代码来解决此限制。

因此，对于初学者来说，添加一些普通的复选框并切换到以下形式：

/*   */

<div>
<input type="checkbox" id="cb1"> <label for="cb1"> 1</label>
</div>

<div>
<input type="checkbox" id="cb2"> <label for="cb2"> 2</label>
</div>

<div>
<input type="checkbox" id="cb3"> <label for="cb3"> 3</label>
</div>

/*   */

<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1"> 1</label>
</div>

<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2"> 2</label>
</div>

<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3"> 3</label>
</div>

将元素的标准显示移到范围之外，并向相邻标签添加缩进：

input[type="checkbox"]:checked, 
input[type="checkbox"]:not(:checked), 
input[type="radio"]:checked, 
input[type="radio"]:not(:checked) 
{
    position: absolute;
    left: -9999px;
}

input[type="checkbox"]:checked + label, 
input[type="checkbox"]:not(:checked) + label, 
input[type="radio"]:checked + label, 
input[type="radio"]:not(:checked) + label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 20px;
    cursor: pointer;
}

在标签之前，为我们的自定义元素添加样式化的容器。对于标志，这些将是带有稍微倒圆的边缘的正方形，以美观；对于开关，它们将是小圆圈：

input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
}

input[type="checkbox"]:checked + label:before, 
input[type="checkbox"]:not(:checked) + label:before {
    border-radius: 2px;
}

input[type="radio"]:checked + label:before, 
input[type="radio"]:not(:checked) + label:before {
    border-radius: 100%;
}

现在添加选择指示器。对于标志，这些将是daws；对于开关，则用颜色填充的较小的圆圈将比容器本身小。为了获得更大的效果，我们还设置了一个小动画：

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

input[type="checkbox"]:checked + label:after, 
input[type="checkbox"]:not(:checked) + label:after {
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-radius: 1px;
    border-left: 4px solid #e145a3;
    border-bottom: 4px solid #e145a3;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type="radio"]:checked + label:after, 
input[type="radio"]:not(:checked) + label:after {
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #e145a3;
}

为了描绘寒鸦，我们旋转了一个小矩形，该矩形的两侧都是彩色的，逆时针旋转45度。

请注意：选择器之前和之后：允许您在标签本身的内容之前和之后立即添加内容。由于我们为标签设置了相对定位（position：relative），因此我们可以为其内容设置上下文绝对定位。

当未选择项目时，它仍然隐藏选择指示器，并相应地在项目处于选定状态时显示它们：

input[type="checkbox"]:not(:checked) + label:after, 
input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
}

input[type="checkbox"]:checked + label:after, 
input[type="radio"]:checked + label:after {
    opacity: 1;
}

我们补充说，此处描述的解决方案可在所有现代版本的Chrome，Firefox，Safari，Opera浏览器中使用，并且从版本9开始以及在Internet Explorer中均可使用。

完整的CSS定义可在此处下载。

使用CSS3设置复选框和单选按钮的样式

More articles: