前端之家

  1. 首页
  2. 问答

如何使单选按钮的轮廓更粗

• 问答

我正在为单选按钮设置类似https://design-system.service.gov.uk/components/radios/的内容。

问题在于，在单选按钮的焦点上，我的看上去像这样：

enter image description here

它应该看起来像这样：

enter image description here

我试图复制该部分的代码并将其放入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>

我希望任何人都可以告诉我如何在聚焦时增大半径。谢谢

hanhjj 回答：如何使单选按钮的轮廓更粗

您需要在单选按钮上使用自定义样式。

更新了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>

csshtmlstyles
本文链接：https://www.f2er.com/2978722.html

大家都在问