：定制无线电输入的造型
我有一个自定义的广播输入风格，或多或少的像这样实现：
<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/
问题是，显然Blink浏览器在单击它们后仍将重点放在无线电元素上，但Firefox和Safari不会。
作为一种解决方法，您可以在mousedown和touchstart上添加一个类来隐藏添加的戒指，并在keydown 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 {
position: absolute;
opacity: 0;
}
.custom-radio + label {
cursor: pointer;
}
.custom-radio + label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0.75em;
height: 0.75em;
margin-right: 0.25em;
background: #EEEEEE;
border: 1px solid #AAAAAA;
border-radius: 50%;
}
.custom-radio:checked + label:before {
background: #6666FF;
}
/* Add styles here: */
.custom-radio:focus + label:before {
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 {
box-shadow: none;
}<p><input placeholder="Tab from here"></p>
<input id="testradio" type="radio" class="custom-radio">
<label for="testradio">Example</label>你可以通过脚本实现这种行为。 首先，您需要绑定按键事件到无线电设备，并在无线电台聚焦或激活时（通过将您的自定义无线电类别添加到活动输入）添加轮廓样式。 这样您就可以在鼠标点击时省略大纲样式。
目前这并不能解决你的问题，但实际上有一个选择器正在满足你的需求:focusring （https://github.com/w3c/csswg-drafts/pull/709）。 目前它只能在Firefox中使用，但也应该会用于其他浏览器。
你可以像sumankumarg建议的那样使用JS，但是你也可以使用假输入的边界来显示焦点状态，就像这样：http://jsbin.com/rofawiginu/edit?html,css,output
链接地址: http://www.djcxy.com/p/70527.html