How to make the outline of a radio button thicker
Sanjo
I'm trying to add something like https://design-system.service.gov.uk/components/radios/ for radio buttons .
The problem is that, on the radio button's focus, mine looks like this:
It should look like this:
I tried to copy that part of the code and put it into jsfiddle, but it didn't work. This is what I ended up with : 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>
I hope anyone can tell me how to increase the radius when focusing. thanks
Charu Maheshwari
You need to use custom styles on radio buttons.
Updated fiddle at https://jsfiddle.net/charumaheshwari/25x3bntw/6/
You can revert again if you need more information about its working, :)
.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>