文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使单选按钮具有更厚的轮廓

问如何使单选按钮具有更厚的轮廓
EN

Stack Overflow用户

提问于 2019-12-04 11:05:55

回答 1查看 760关注 0票数 2

我正试着为单选按钮准备一个类似https://design-system.service.gov.uk/components/radios/的东西。

问题是，在单选按钮的焦点上，on看起来是这样的：

在这里输入图像描述

它应该是这样的：

在这里输入图像描述

我试着复制那个部分的代码，让它轻装上阵，但结果并不顺利。这就是我最后得到的结果：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>

我希望任何人都能告诉我如何使半径在焦点上变厚。谢谢

html

css

styles

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-04 11:18:15

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59174551

复制

相似问题

问如何使单选按钮具有更厚的轮廓
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使单选按钮具有更厚的轮廓EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使单选按钮具有更厚的轮廓
EN