工作示例：

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

我已经面对这个问题这么长时间我得到了解决方案

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 3

问题是，显然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 4

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

Answer 5

目前这不会解决您的问题，但实际上有一个选择器可以满足您的需求：:focusring（https://github.com/w3c/csswg-drafts/pull/709）。现在它只适用于Firefox，但也应该来到其他浏览器。

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

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，因为它使用蓝色作为无线电轮廓。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 7

我不确定这在您的设置中是否可行，但是在这种情况下，如果可用的包装器 div 非常方便。

这是我正在使用的 html：

<div class="hvf__form-item hvf__form-item--radio">
  <input type="radio" id="amount-to-give--25" name="hvf-radios-amount" class="hvf__radio" required value="25">
  <label for="amount-to-give--25">€25</label>
</div>

有了包装器 div，我就可以使用 :focus-within 为每个单选元素添加轮廓。

.hvf__form-item--radio:focus-within {
  outline: 2px dashed var(--color-grey--darkest);
  outline-offset: 4px;
}

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

7 个答案:

工作示例：