：自定义电台输入

Question

焦点的造型我有或多或少像这样实现了自定义的无线输入方式：

<input type="radio" id="testradio" class="visuallyhidden custom-radio"> 
<label for="testradio">...</label> 

.custom-radio + label:before { 
    content: "" 
    // Styling goes here 
} 

.custom-radio:focus + label:before { 
    outline: 1px solid black; 
] 

这个工程除了一个唠叨细节伟大：键盘导航的焦点风格。我可以选中一组单选按钮并使用箭头键更改所选内容，但默认：焦点轮廓不会出现，因为输入标记是隐藏的。

我尝试添加我自己的焦点样式，但最终结果与默认浏览器样式的行为不同。默认情况下，Chrome浏览器（以及我假设的其他浏览器）只会在键盘选择收音机输入时绘制轮廓，而不是单击它们。但是，当单击无线电输入时（或者在这种情况下单击标签），CSS：focus样式似乎也适用，看起来非常糟糕。

基本上我的问题是：我如何将一个焦点样式应用到一个无线电输入，完全模拟默认的浏览器行为，即不出现鼠标点击焦点？还是有另一种方法可以自定义这个无线电输入，这将有助于保持默认行为？

编辑：这里有一个JSFiddle展示我在说什么。在第一行上，您可以单击一个单选按钮，然后使用箭头键进行导航 - 只有使用键盘时才会显示大纲。在第二行上，单击单选按钮立即触发焦点样式。

http://jsfiddle.net/7Ltcks3n/1/

Answer 1

可以实现通过脚本此行为。首先你需要绑定keypress事件给无线电，并且在无线电台聚焦或激活时（通过将你的自定义无线电类别添加到活动输入），在该处理程序中添加轮廓样式。这样您就可以在鼠标点击时省略大纲样式。

Answer 2

这不会解决您目前的问题，但实际上有一个选择器，它完全符合您的需求：:focusring（https://github.com/w3c/csswg-drafts/pull/709）。目前它只能在Firefox中使用，但也应该会用于其他浏览器。

你可以使用JS像sumankumarg建议，但你也可以用假输入的边框显示焦点状态，像这样： http://jsbin.com/rofawiginu/edit?html,css,output

Answer 3

我面临这个问题，只要在这里，我得到了解决

https://jsfiddle.net/hahkarthick/nhorqnvt/3/

input:focus, input:hover{ 
 
    outline: 2px auto rgb(229, 151, 0); 
 
    outline-offset: -2px; 
 
}

<input id="inp" type=radio>radio1 
 
<input type=radio>radio2 
 
<input type=radio>radio3 
 
<input type=radio>radio4 
 
<input type=radio>radio5

input:focus, input:hover{ 
outline: 2px auto rgb(229, 151, 0); 
outline-offset: -2px; 

}

Answer 4

我相信这就是你要找的，我的朋友。能够模拟默认浏览器大纲。你应该能够在你的代码中使用下面的技术来获得效果。

演示代码下面，阅读更多的文章出处：https://ghinda.net/article/mimic-native-focus-css/

.unreal-focus { 
    outline-width: 2px; 
    outline-style: solid; 
    outline-color: Highlight; 
} 

/* WebKit gets its native focus styles. 
*/ 
@media (-webkit-min-device-pixel-ratio:0) { 
    .unreal-focus { 
    outline-color: -webkit-focus-ring-color; 
    outline-style: auto; 
    } 
} 

Answer 5

的问题是，显然闪烁浏览器保持专注于无线电元件被点中后，但Firefox和Safari没有。

作为解决方法，您可以在文件mousedown和touchstart上添加一个类，以隐藏您添加的戒指，并将其从​​上删除。

工作例如：

var className = 'focus-radio-hide-ring'; 
 
var add = function() { 
 
    document.documentElement.classList.add(className); 
 
}; 
 
var remove = function() { 
 
    document.documentElement.classList.remove(className); 
 
}; 
 
window.addEventListener('mousedown', add, true); 
 
window.addEventListener('touchstart', add, true); 
 
window.addEventListener('keydown', remove, true);

.custom-radio { 
 
\t position: absolute; 
 
\t opacity: 0; 
 
} 
 
.custom-radio + label { 
 
\t cursor: pointer; 
 
} 
 
.custom-radio + label:before { 
 
\t content: ""; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t width: 0.75em; 
 
\t height: 0.75em; 
 
\t margin-right: 0.25em; 
 
\t background: #EEEEEE; 
 
\t border: 1px solid #AAAAAA; 
 
\t border-radius: 50%; 
 
} 
 
.custom-radio:checked + label:before { 
 
\t background: #6666FF; 
 
} 
 

 
/* Add styles here: */ 
 
.custom-radio:focus + label:before { 
 
\t box-shadow: 0 0 4px 1px rgba(0, 0, 0, 1); 
 
} 
 
/* Add disable them again here: */ 
 
.focus-radio-hide-ring .custom-radio:focus + label:before { 
 
\t box-shadow: none; 
 
}

<p><input placeholder="Tab from here"></p> 
 

 
<input id="testradio" type="radio" class="custom-radio"> 
 
<label for="testradio">Example</label>

Answer 6

我放在一起下面的代码片段根据您的原代码，而不是小提琴比如你提供。从我收集的内容中，您试图用您自己的风格元素（label:before）替换默认单选按钮。

由于没有指定如何隐藏默认收音机，我只是使用opacity: 0并调整了标签元素的位置以覆盖它。将收音机从屏幕上移开，可以达到同样的效果：position: absolute; top: -999; left -999;（或类似的东西）。

我试过在无线电上使用display: none和vibility: hidden，但是这是个问题，因为apparently the focus action isn't triggered when they aren't visible。

我也给了label:before元素一些样式，以便它显示出来。

为了解决您的问题：

.custom-radio:focus + label:before { 
    outline: 1px solid black; 
    outline: 1px auto -webkit-focus-ring-color; 
} 

的outline:0 1px solid black;给人当点击标签时默认的轮廓。这适用于FF和IE，但对于Chrome，您需要将颜色更改为-webkit-focus-ring-color，因为它为广播轮廓使用了蓝色。

.visuallyhidden { 
 
    opacity: 0; 
 
} 
 
.custom-radio + label { 
 
    position: relative; 
 
    left: -25px; 
 
    margin-right: -15px; 
 
} 
 
.custom-radio + label:before { 
 
    content: "X"; 
 
    margin: 5px; 
 
    // Styling goes here 
 
} 
 

 
.custom-radio:focus + label:before { 
 
    outline: 1px solid black; 
 
    outline: 1px auto -webkit-focus-ring-color; 
 
}

<input type="radio" name="testradio" id="testradio1" class="visuallyhidden custom-radio"> 
 
<label for="testradio1">radio 1</label> 
 
<input type="radio" name="testradio" id="testradio2" class="visuallyhidden custom-radio"> 
 
<label for="testradio2">radio 2</label> 
 
<input type="radio" name="testradio" id="testradio3" class="visuallyhidden custom-radio"> 
 
<label for="testradio3">radio 3</label>