Is there a way make this html outline style different? - html

Question

Smiley Face
Im working on a customer survey page and this is currently what i have. Those are images as radio buttons. The problem is when it's checked, it's ugly with the red square outline. Is there a way to make it circular soft glow? This is the code. I've search up the outline style but they're mostly dotted or double lines style and that's not what im looking for. Any help is appreciated.
<label style="display: inline-block;">
<h3>Dissatisfied</h3>
<input type="radio" ngModel name="smiley" value="Dissatisfied">
<img src="..\assets\images\smiley_2_62x62.png">
</label>
Full css for the radio and form.
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
[type=radio] + img {
cursor: pointer;
}
/ * CHECKED STYLES */
[type=radio]:checked + img {
outline: 2px solid #f00;
}

Answer 1

This will change the border to be round like the image and give it a glow:
[type=radio]:checked + img {
outline: 2px solid #f00;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 0 5px 5px #f00;
}

Answer 2

I would use the following:
/ * CHECKED STYLES */
[type=radio]:checked + img {
border: 2px solid #f00;
border-radius: 50%
}

Answer 3

You should use borders for the rounded effect instead of outline. Set the border-radius for the image.
[type=radio]+img {
cursor: pointer;
height: 50px;
width: 50px;
}
[type=radio]:checked + img {
border: 2px solid #9ecaed;
border-radius: 50px;
box-shadow: 0 0 10px #9ecaed;
}
I would also recommend you to use javascript to toggle the radio button on click or you could just make the radio button the same size as your image. Of course the non-javascript way would be easier.

Answer 4

There are many ways to change the look of the native input element UI, use the below code to change the look of radio buttons.
.check_radio {
margin:15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
font-family: "Lato";
font-size: 14px;
color: #231E1E;
font-weight: 500;
line-height: 1.4;
}
.check_radio input[type="radio"] {
position: absolute;
opacity: 0;
}
.check_radio input[type="radio"] + span {
margin: 0 5px 0 0;
display: block;
height: 20px;
width: 20px;
background: #FFFFFF;
border: 1px solid #6E6B6B;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 50%;
-webkit-box-shadow: 0px 4px 8px rgb(44 39 56 / 8%);
box-shadow: 0px 4px 8px rgb(44 39 56 / 8%);
position: relative;
}
.check_radio input[type="radio"]:checked + span {
border: 2px solid #2474FF;
}
.check_radio input[type="radio"]:checked + span:after {
content: '';
background: #2474FF;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<label for="rm_1" class="check_radio">
<input type="radio" name="payment_type" id="rm_1">
<span></span>
Full Payment
</label>
<label for="rm_2" class="check_radio">
<input type="radio" name="payment_type" id="rm_2">
<span></span>
Partial Payment
</label>