html - 如何使单选按钮具有更粗的轮廓-6ren

html - 如何使单选按钮具有更粗的轮廓

转载作者：行者123 更新时间：2023-11-28 10:07:43

25

4

我想拥有这样的东西 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>

我希望任何人都可以告诉我如何使焦点半径变粗。谢谢

最佳答案

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

在 https://jsfiddle.net/charumaheshwari/25x3bntw/6/ 更新了 fiddle

如果您需要有关它的工作的更多信息，可以再次还原，:)

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

关于html - 如何使单选按钮具有更粗的轮廓，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59174551/

25

4

0

文章推荐： ios - Swift 在 UITableViewCells 中保留 UISegmentedControl 值

文章推荐： ios - 检查用户连续使用应用的天数

文章推荐： javascript - 如何修复div纵横比？

文章推荐： javascript - vue.js - 转换转换不工作

html - 在没有模糊效果的情况下在元素周围均匀地生成阴影/轮廓
我有一个不规则形状的元素(比方说图标)。我想要围绕它的某种轮廓，以符合特定颜色的形状。此轮廓的颜色必须均匀地围绕形状，即与形状各处的距离相同，并且没有颜色渐变。我发现使用的是 css 选项 fil
c++ - OpenCV 轮廓？
这部分代码我总是出错 &contours = ((contours.h_next) -> h_next); contours.h_next = ((contours.h_next) -> h_next
css - 更正形状的不规则边框/轮廓
我通过 css (:after) 创建了 3 个圆圈，使用一些背景颜色，边框看起来不规则。有什么解决办法吗？在这里您可以看到问题:https://flowersliving.com/cpt_01/a
css - 渐变边框上的边框(轮廓)
使用这个: background: -moz-linear-gradient(315deg, transparent 10px, black 10px); 如何在不使用 border 的情况下围绕它创
二进制二维矩阵的 python 轮廓
我想计算二元 NxM 矩阵中某个形状周围的凸包。凸包算法需要一个坐标列表，所以我采用 numpy.argwhere(im) 来获得所有形状点坐标。然而，这些点中的大多数对凸包没有贡献(它们位于形状的内
css - 删除焦点下拉菜单的虚线边框/轮廓
如何删除从下拉菜单中选择元素时显示的虚线边框/轮廓？您可以看到显示了虚线边框/轮廓，我想删除它(在 Firefox 中截取的屏幕截图)。尝试下面的解决方案并没有删除它: select:focus,
css - 如何绘制半圆(仅限边框、轮廓)
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎是题外话，因为它缺乏足够的信息来诊断问题。更详细地描述您的问题或include a min
Qt4:缩放不变的 qgraphicsitem 轮廓
我正在使用 Qt4 GraphicsView 框架绘制一些多边形，并且允许用户放大和缩小绘图。我希望多边形随着用户在 View 中更改缩放级别(比例)而变得越来越小，但是有没有办法使轮廓厚度始终保持不
点列表的 3D 轮廓(凹包)
我在 C# 中有一个 Vector3 点列表，我需要计算这些点的凹轮廓。确实有很多引用资料，尤其是 -convex- 分辨率(我已经成功实现了，多亏了 graham 的算法)，但是，由于我现在需要有
java - 基于运输时间的热图/轮廓(反向等时轮廓)
注: r 中的解决方案, python , java ，或者如果需要，c++或 c#是需要的。我正在尝试根据运输时间绘制轮廓。更清楚地说，我想将具有相似旅行时间(比如说 10 分钟间隔)的点聚集到特
python - 在另一个图像上匹配轮廓或绘制 (png) 轮廓
假设我在图像上找到了轮廓。在图像 2 上找到此轮廓位置的最佳方法是什么？我看到两个选项:要么我用白线绘制轮廓并匹配图像 2 上的图像，要么我以某种方式(这甚至可能吗？)直接匹配图像 2 上的轮廓。
python - len(轮廓)是什么意思？
我一直在研究细菌的图像，希望从图像中获取细菌的数量，还需要根据特定的形状和大小对细菌进行分类。我正在使用opencv python。现在，我使用轮廓法。 contours,hierarchy
python - 如何在OpenCV中区分实心圆/轮廓和未实心圆/轮廓？
我无法区分以下两个轮廓。 cv2.contourArea两者的值相同。在Python中有什么功能可以区分它们吗？最佳答案要区分填充轮廓和未填充轮廓，可以在使用 cv2.findContours 查
java - 基于条件的 Spring 轮廓
是否可以根据 Activity 配置文件的某些表达式来注册bean前任。 @Profile(!prod) @Profile(name!="test") 我有一种情况，我需要根据许多不同的条件配
iphone - 重叠的 CAShapeLayer 轮廓
我有一个由多个 CAShapeLayer 组成的 3D 相似图形对象。必须抚摸所有形状(天花板和墙壁)。有些形状共享一条边 - 这似乎是问题的根源。然而，轮廓似乎是围绕另一个形状的现有轮廓绘制的。所
javascript - 表单中输入元素周围的 CSS 轮廓
有谁知道，是否可以在用户使用顺序导航(TAB 按钮)时在输入元素周围显示轮廓，并在用户用鼠标单击此输入元素时隐藏轮廓？有没有人实现过这种行为？我在 CSS 文件中的 :focus 选择器上使用这个属
css - 悬停时围绕框阴影的 Firefox 轮廓
这是我在 StackOverflow 上的第一个问题，所以我会尝试以正确的方式格式化它。基本上，我有一个带有边框和轮廓的 div。悬停时，div 也会有一个阴影，当然，它应该在轮廓之外。这适用于所有
c++ - 如何水平连接 OpenCV 轮廓？
我在 Opencv 2.9 (C++) 中使用 findContours。我得到的是一个 vector> contours，它描述了我的轮廓。假设我有一个矩形，其轮廓存储在 vector 中。接下来我
javascript - 仅围绕父元素的 CSS 轮廓
我有一个 div，它有附加的子 div，定位在父 div 之外。我希望父 div 有一个轮廓 onclick，但轮廓延伸到子 div 周围。有没有办法让轮廓完全围绕父 div。我不能使用边框，因
css - ionic 图标周围的阴影/轮廓
我正在尝试在彩色图标周围设置实线边框。应该足够直截了当，显然它适用于字形，但我无法让它适用于我试过... // like this fiddle: http://jsfiddle.net/9s

首页

博学

6Ren·AI

商城

html - 如何使单选按钮具有更粗的轮廓