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>&nbsp;&nbsp;&nbsp;

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;
       }

CodePudding user response：

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;
}

CodePudding user response：

I would use the following:

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

CodePudding user response：

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.

CodePudding user response：

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>