Question 222984 in CSS Question posted in
Some basic documentation can be found here.

How to design custom radio with css

I am new to element ui and css. I want to create the custom radio as shown in the photo. When the user clicks on a radio button, the selected radio button will display a checkmark (✔) symbol inside the radio button to indicate selection. Is there any way to create this with element ui with css class?

enter image description here

Tags:

2

Answers


  1. 0

    I hope you get some idea. I tried my best, and I hope you are satisfied with this.

    .radio-buttons {
    display: flex;
  }

  .radio-button {
    display: flex;
    align-items: center;
    margin-right: 10px;
    position: relative;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
  }

  .radio-button input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .radio-tick {
    width: 15px;
    height: 15px;
    border: 2px solid #9dc8f5;
    border-radius: 50%;
    margin-right: 10px;
  }

  .radio-button input[type="radio"]:checked + .radio-tick::before {
    content: "f00c"; 
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; 
  }

 
  .radio-button input[type="radio"]:checked ~ .radio-tick {
    background-color: #007bff;
  }
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<div class="radio-buttons">
  <label class="radio-button">
    <input type="radio" name="gender" value="male" />
    <span class="radio-tick"></span>
    Male
  </label>
  <label class="radio-button">
    <input type="radio" name="gender" value="female" />
    <span class="radio-tick"></span>
    Female
  </label>
</div>
    Login or Signup to reply.
  2. 0

    First let’s see how to create a check, tick icon using SVG:
    we need a green polyline with with rounded caps made of three points (by using points="x,y x,y x,y")

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
  <polyline points="0.15,0.5 0.4,0.75 0.85,0.25" style="fill:none; stroke:#14bf8b; stroke-linecap:round; stroke-width:0.15;"/>
</svg>
    • in HTML wrap the named radio inputs in <label>
    • to style the label element in CSS use the label:has([type=ratio]) selector
    • the input’s checked state can be inferred to the parent label using label:has([type=radio]:checked)
    • use CSS appearance: none; on the radio element and custom-style it accordingly
    • for [type=radio]:checked use the SVG icon as its centered background image, just make sure to replace (uri escape) any instance of # with %23 (like i.e: for the stroke color hash value)
    * {margin: 0; box-sizing: border-box;}
body { font: 16px/1 sans-serif;}

label:has([type=radio]) {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid #aaa;
  padding: 1rem 1.5rem;
  border-radius: 3rem;
}

label:has([type=radio]:not(:disabled)) {
  cursor: pointer;
}

[type=radio] {
  appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  border: inherit;
  border-radius: inherit;
}

label:has([type=radio]:checked) {
  border-color: #14bf8b;
  background-color: #14bf8b;
  color: #fff;
}

[type=radio]:checked {
  border-color: transparent;
  background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><polyline points="0.15,0.5 0.4,0.75 0.85,0.25" style="fill:none;stroke:%2314bf8b;stroke-linecap:round;stroke-width:0.15;"/></svg>') no-repeat 50% / 1rem;
}
    <label>
  <input type="radio" name="payment" checked> Virtual payment
</label>

<label>
  <input type="radio" name="payment"> Physical payment
</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search