我正在尝试为单选按钮添加类似于此https://design-system.service.gov.uk/components/radios/的内容。
问题是，在单选按钮的焦点上，我的看起来像这样：
应该看起来像这样：
我试图复制该部分的代码并将其放入jsfiddle，但效果不佳。我最终得到的是：https://jsfiddle.net/jcL38wu7/1/
.multiple-choice [type=radio]:focus+label::before, .multiple-choice [type=checkbox]:focus+label::before {
-webkit-box-shadow: 0 0 0 4px $focus;
-moz-box-shadow: 0 0 0 4px $focus;
box-shadow: 0 0 0 4px $focus;
}
.div-table__cell--action{margin-bottom:0}
.div-table__cell:last-of-type{padding-right:0}
.div-table__cell--action{min-height:40px;min-width:160px}
[type=radio]+label::before{
content:"";
border:2px solid;
background:transparent;
width:34px;
height:34px;
position:absolute;
top:0;left:0;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%}
input{font-size:inherit;font-family:inherit;line-height:inherit;font-weight:normal;}
input{font-family:"nta",Arial,sans-serif;}
input:focus{outline:3px solid #ffbf47;outline-offset:0;}
.multiple-choice input{position:absolute;cursor:pointer;left:0;top:0;width:38px;height:38px;z-index:1;margin:0;zoom:1;filter:alpha(opacity=0);opacity:1;}
.multiple-choice input:disabled{cursor:default;}
input:focus{outline:3px solid #fd0!important;outline-offset:0;box-shadow:inset 0 0 0 2px;}<div class="div-table__cell div-table__cell--action">
<div class="multiple-choice multiple-choice--booking">
<input id="radio-{event.id}"
type="radio" name="selected-date"
class="multiple-choice__input"
>
</div>
</div>我希望任何人都能告诉我如何在聚焦时增大半径。谢谢
您需要在单选按钮上使用自定义样式。
https://jsfiddle.net/charumaheshwari/25x3bntw/6/的小提琴已更新
如果您需要有关其工作的更多信息，可以再次还原，：）
.wrapper {
margin:50px;
position:relative;
}
.multiple-choice__input {
cursor: pointer;
position: absolute;
z-index: 1;
top: -2px;
left: -2px;
width: 44px;
height: 44px;
margin: 0;
opacity: 0;
}
.multiple-choice label::before {
content: "";
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border: 2px solid currentColor;
border-radius: 50%;
background: transparent;
}
.multiple-choice label::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 0;
height: 0;
border: 10px solid currentColor;
border-radius: 50%;
opacity: 0;
background: currentColor;
}
.multiple-choice__input:checked + label::after {
opacity: 1;
}
.multiple-choice__input:focus + label::before {
border-width: 4px;
-webkit-box-shadow: 0 0 0 4px #fd0;
box-shadow: 0 0 0 4px #fd0;
}<body>
<div class="wrapper">
<div class="div-table__cell div-table__cell--action">
<div class="multiple-choice multiple-choice--booking">
<input id="radio-1" type="radio" name="selected-date" class="multiple-choice__input">
<label for="radio-1">
</label>
</div>
</div>
</div>
</body>