:专注于自定义无线电输入的样式

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:焦点样式似乎也适用于单击无线电输入(或者在这种情况下,单击标签),这看起来非常糟糕.

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

编辑:这是一个JSFiddle,展示了我在说什么.在第一行,您可以单击单选按钮,然后使用箭头键导航 - 只有在使用键盘时才会显示轮廓.在第二行,单击单选按钮会立即触发焦点样式.

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

Answer 1

我相信这就是你正在寻找的，我的朋友。能够模仿默认浏览器轮廓。您应该能够在代码中使用以下技术来获得效果。

下面的演示代码，在源文章中阅读更多内容：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 2

问题是，显然 Blink 浏览器在单击后会保持对无线电元素的关注，但 Firefox 和 Safari 则不然。

作为一种解决方法，您可以在文档中添加一个类mousedown并touchstart隐藏您添加的环，然后将其删除keydown。

工作示例：

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>

Answer 3

您可以通过脚本来实现此行为。首先，您需要将按键事件绑定到无线电，并在无线电获得焦点或活动时在该处理程序中添加轮廓样式（通过将自定义无线电类添加到活动输入）。这样您就可以省略鼠标单击时的轮廓样式。