如何仅使用CSS复选框和标签样式 [英] How to Checkbox and label style only with CSS

问题描述

有人可以帮助我如何设计复选框和标签，例如仅使用css在共享图片上:悬停效果，正常以及何时用蓝色选中内部

somebody can help me with how can I design checkbox and label like on the shared picture only with css : Hover effect, normal and when is checked with blue inside

我正在尝试做，但是我做不到.

I am trying to do but I can't.

推荐答案

以下内容应为您提供一个不错的起点.您要根据前一个复选框的:checked状态(其自身已隐藏)来设置相关的label及其:before伪元素的样式.

The below should give you a decent starting point. You want to style a related label and its :before pseudo element dependant on the :checked state of a preceding checkbox, which is hidden itself.

以及修订版，其中CSS稍微复杂一些

And a revised version, with slightly more complex CSS

HTML

<input id='check1' type='checkbox'>
<label for='check1'>Click me!</label>

CSS

input[type=checkbox] {
    display:none;
}
input[type=checkbox]:checked +label:before {
    background:blue;
}
label {
    color:blue;
}
label:before {
    content:'';
    height:1em;
    width:1em;
    border:1px solid blue;
    display:inline-block;
}

这篇关于如何仅使用CSS复选框和标签样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！