Tips on how to decorate a radio button using borders and colors

Question

Tips on how to decorate a radio button using borders and colors

How can I change the color of my radio button and its border color?

I attempted to modify the code below, but it is not producing the desired result.

li.payment_method_bacs input[type='radio']:checked:before {
    background: black !important;
    content: "";
    display: block;
    position: relative;
    top: 19px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 3px solid black;
}

li.payment_method_bacs input[type='radio']:checked:before {
    background: black !important;
    content: "";
    display: block;
    position: relative;
    top: 19px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 3px solid black;
}

<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked">

html css

Answer 1

Answer №1

Application of :after and :before on the input element in CSS is considered invalid. To achieve this effect, you will need to enclose other elements within a div container. The div will utilize the checked value of the radio button and apply the desired functionality using :after and :before pseudo-elements. Two different approaches are demonstrated below.

Approach 1: using div as a faux element:

li {
  list-style: none; display:inline-block; margin-right:20px;
}

.radioBox {
  position: relative;
  background: transparent;
  z-index: 1;
  width: 13px;
  height: 13px;
  cursor: pointer;
}

.radioBox>div {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 2px solid black;
  border-radius: 12px;
}

.radioBox>input {
  position: absolute;
  z-index: 2;
  width: 13px;
  height: 13px;
  opacity: 0;
}

.radioBox > input:checked + div:after {
    position: absolute;
    content: " ";
    font-size: 0;
    display: block;
    left: 1px;
    top: 1px;
    width: 10px;
    height: 10px;
    background: black;
    border-radius: 10px;
}

<ul>
  <li class="payment_method_bacs">
    <div class="radioBox "><input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
      <div></div>
    </div>

  </li>
  
  <li>
<div class="radioBox ">
  <input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked" >
    <div></div>

</div>
</li>
</ul>

Approach 2: Using label as a faux element.

ul,li{list-style:none; display:inline-block;}
label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 13px;
}
input[type=radio] {
  display: none;
}
label:before {
  content: "";
  display: inline-block;
 
  width: 16px;
  height: 16px;
 
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #fff;
 border:1px solid #000;
 border-radius:50%;
}
.radio label:before {
  border-radius: 8px;
}
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #000;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

<ul>
<li>
<div class="radio">
  <input id="payment_method_bacs" type="radio" class="inp...
....;>
  <label for="payment_method_bacs1">Paypal</label>

</div>
</li>
</ul>

Answer 2

Application of :after and :before on the input element in CSS is considered invalid. To achieve this effect, you will need to enclose other elements within a div container. The div will utilize the checked value of the radio button and apply the desired functionality using :after and :before pseudo-elements. Two different approaches are demonstrated below.

Approach 1: using div as a faux element:

li {
  list-style: none; display:inline-block; margin-right:20px;
}

.radioBox {
  position: relative;
  background: transparent;
  z-index: 1;
  width: 13px;
  height: 13px;
  cursor: pointer;
}

.radioBox>div {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 2px solid black;
  border-radius: 12px;
}

.radioBox>input {
  position: absolute;
  z-index: 2;
  width: 13px;
  height: 13px;
  opacity: 0;
}

.radioBox > input:checked + div:after {
    position: absolute;
    content: " ";
    font-size: 0;
    display: block;
    left: 1px;
    top: 1px;
    width: 10px;
    height: 10px;
    background: black;
    border-radius: 10px;
}

<ul>
  <li class="payment_method_bacs">
    <div class="radioBox "><input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
      <div></div>
    </div>

  </li>
  
  <li>
<div class="radioBox ">
  <input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked" >
    <div></div>

</div>
</li>
</ul>

Approach 2: Using label as a faux element.

ul,li{list-style:none; display:inline-block;}
label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 13px;
}
input[type=radio] {
  display: none;
}
label:before {
  content: "";
  display: inline-block;
 
  width: 16px;
  height: 16px;
 
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #fff;
 border:1px solid #000;
 border-radius:50%;
}
.radio label:before {
  border-radius: 8px;
}
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #000;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

<ul>
<li>
<div class="radio">
  <input id="payment_method_bacs" type="radio" class="inp...
....;>
  <label for="payment_method_bacs1">Paypal</label>

</div>
</li>
</ul>

Answer 3

Answer №2

When adding HTML within input and label tags, the input will remain hidden until the checkbox is checked. You can then customize the style of the label as desired.

input[type="radio"] {
  display: none;
}


input[type="radio"]:checked + label::before {
  background: red none repeat scroll 0 0;
  border: 0 solid #333;
  content: "";
  font-size: 0;
  height: 20px;
  width: 20px;
}

<span class="input-lif in-lidt">
  <input class="contact_radio" id="rbsrt1" name="contact" value="individual" checked="checked" type="radio">
  <label for="rbsrt1"> Individual </label>
</span>

Answer 4

When adding HTML within input and label tags, the input will remain hidden until the checkbox is checked. You can then customize the style of the label as desired.

input[type="radio"] {
  display: none;
}


input[type="radio"]:checked + label::before {
  background: red none repeat scroll 0 0;
  border: 0 solid #333;
  content: "";
  font-size: 0;
  height: 20px;
  width: 20px;
}

<span class="input-lif in-lidt">
  <input class="contact_radio" id="rbsrt1" name="contact" value="individual" checked="checked" type="radio">
  <label for="rbsrt1"> Individual </label>
</span>

Answer 5

Answer №3

Modifying the appearance of form inputs can be a challenge, as they are rendered differently by each browser.

To achieve consistent results across browsers, you may want to consider using an image (either inline or as a background image) or another element to display your input.

  <label id="myLabel" for="payment_method_bacs">
    <input id="payment_method_bacs" 
      type="radio" 
      class="input-radio" 
      name="payment_method" 
      value="bacs" 
      data-order_button_text="" 
      checked="checked">
  </label>

  #myLabel{
      width: 20px;
      height: 20px;
      background: white;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      border:2px solid #ccc;
      display:inline-block;
  }

  #myLabel input{
      display:none;
  }

You can view the Fiddle here: https://jsfiddle.net/omfv8qhj/

Answer 6

Modifying the appearance of form inputs can be a challenge, as they are rendered differently by each browser.

To achieve consistent results across browsers, you may want to consider using an image (either inline or as a background image) or another element to display your input.

  <label id="myLabel" for="payment_method_bacs">
    <input id="payment_method_bacs" 
      type="radio" 
      class="input-radio" 
      name="payment_method" 
      value="bacs" 
      data-order_button_text="" 
      checked="checked">
  </label>

  #myLabel{
      width: 20px;
      height: 20px;
      background: white;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      border:2px solid #ccc;
      display:inline-block;
  }

  #myLabel input{
      display:none;
  }

You can view the Fiddle here: https://jsfiddle.net/omfv8qhj/

Tips on how to decorate a radio button using borders and colors

Answer №1

Answer №2

Answer №3

Similar questions

Guide on implementing Observables in Angular 2+ to update a single entry in a table in real-time

Display the accurate duration based on the dates selected in an HTML form automatically

Using Jquery to set values for css properties

Minimizing Jitter in HTML5 and JavaScript Applications

Display all information associated with the class that matches the clicked ID

Creating a visual that when clicked, reveals an enlarged version at a different location

Textview is cluttering space with Html.fromhtml that is not needed

Numerous sections of content

A guide to placing tooltips dynamically in highcharts column charts

Angular allows for the creation of a unique webpage layout featuring 6 divs

A demonstration of VueJS Nested Builder functionality

Failure to display masonry arrangement

Obtaining the Div ID After Clicking on a Link

PHP jQuery buttons for popovers

Hover over this area to reveal the hidden text as it slides into view

Enhancing React-Admin with custom Material-UI theme overrides for targeted CSS selectors on a global scale

What is the best way to conceal a div when there are no visible children using AngularJS?

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

The alignment of elements in the div seems to be slightly skewed

"Ajax validation is causing the duplication of the HTML page content within an HTML