gpt4 book ai didi

css - 无法专注于带有 tabindex 的复选框

转载 作者:行者123 更新时间:2023-11-28 00:59:58 25 4
gpt4 key购买 nike

我无法专注于 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com