作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法专注于 tabindex=0 的复选框。我认为这是由于显示和不透明度设置所致
.newCheckbox input[type=checkbox] {
display: none;
opacity: 0;
}
我在复选框前也有一个标签。是否可以更改代码以使复选框标签突出显示 - 使外观看起来就像复选框在选项卡上突出显示一样。
plunkr - https://plnkr.co/edit/6ecZu1G8tKzztGGbK4G3?p=preview
最佳答案
不确定为什么要这样做,但是您可以像这样将复选框的 opacity
更改为 1:
input[type=checkbox] {
opacity: 0;
}
input[type=checkbox]:focus {
opacity: 1;
}
但这不会改变用户最初实际上看不到它的事实,除非他们偶然用键盘键入它!
我可能会建议使用 these techniques 之一隐藏输入相反,像这样编写您的标记:
<input type="checkbox" id="title"><br>
<label for="title">Male</label>
然后使用直接兄弟选择器 +
对 label
进行样式化,即
[type=checkbox] + label {
//custom css here
}
标签将获得焦点而不是输入,并且您可以更好地控制样式:)
关于css - 无法专注于带有 tabindex 的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42615148/
我是一名优秀的程序员,十分优秀!