css - Custom Checkbox / Radio Buttons Focus
问题描述
I've created Custom Checkbox / Radio using:
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
See: https://codepen.io/abluegem/pen/xxxxqez And: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
Now I'm facing the problem of "focus" state. These buttons don't have focus state. I tried by adding my own CSS but it's not working.
As you can see that the main element/tag is "label" which don't have focus state. And there is input tag but it's hidden.
I wonder if I can have focus state on these buttons.
解决方案
To set the focus style in the custom checkbox you need to change the style of a different element when the real checkbox has the focus.
Add this css:
input:focus + .checkmark
{
background-color: red;
}
Reference: focusing on an element changes another's CSS
推荐阅读
- javascript - iPad打印整个页面而不是chrome中的目标div
- f# - F# 中有没有办法链接计算?
- pandas - iloc 搜索数据帧的替代方法
- regex - 如何在 kibana discover 中搜索以 g、b 或 a 开头的任何城市?
- apache-flink - 为什么 Flink 在 DataStream join + Global 窗口上发出重复记录?
- authentication - 将 react-django 暂存站点放在基本身份验证后面,但身份验证与端点的令牌身份验证冲突
- php - PHP数组选择无法正常工作
- internet-explorer - Tabulator 在 IE11 中选择编辑器错误
- swift - 快速解决冲突的结构值类型
- php - Laravel 5.5 基于 MySQL 的“队列”在高请求量时锁定数据库