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

I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

Resolving odd SVG anomalies

Deletion of ::before and ::after pseudo-elements upon addition of the class is-sticky

What is the best way to prevent content from spilling over into the div on the right

Customize Cell Styling with Bootstrap Full Calendar CSS

Is there a way to connect CSS files from a different directory?

Is it safe to use handlebars' default escaping in HTML attributes?

Elements displaying outside of block 'a' tag

Issue encountered while attempting to attach an event listener to an element within a class

Generating safe HTML output in PHP requires adding 4 spaces before the code

How can I make a 100vh div stick to the screen?

Tips on displaying the entire text when hovering over it

Sending a CSS class to an Angular library

Tips for adjusting the width of an HTML element that is set to position: fixed

Using jQuery to toggle visibility on click within WordPress

Is it possible to utilize HTML as a platform for interfacing with a C/C++ program?

What is causing justify-content to not function properly in React?

The <a> tag does not lead to a different webpage and cannot be clicked on

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

Activate validation checks when the Div is loaded