Putting CSS Borders Around Radio Buttons

Putting css borders around radio buttons

You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I do not waive confidentiality

Border around radio button

You can wrap your radio buttons with a <fieldset></fieldset> tag and your text with a <legend></legend> tag.

Example

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

How to style a radio button with border and color

You are applying :after and :before on the input element which is invalid with css. So you need to wrap other things like a div to achieve this. The div will use the checked value of radio and with :after and :before element will do the thing as needed. I am using 2 approaches.

Approach 1: using div as 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>

Change border-color of radio button when selected

Hey mate you need to check your css. The border you got is created by box-shadow and not by a border:

here is a fiddle that is working. Have Fun

input[type='radio'] {

        -webkit-appearance: none;

        width: 20px;

        height: 20px;

        border-radius: 50%;

        outline: none;

        border: 3px solid gray;

    }

    input[type='radio']:before {

        content: '';

        display: block;

        width: 60%;

        height: 60%;

        margin: 20% auto;

        border-radius: 50%;

    }

 input[type="radio"]:checked:before {

        background: green;

        

    }

    

    input[type="radio"]:checked {

      border-color:green;

    }

    .role {

        margin-right: 80px;

        margin-left: 20px;

        font-weight: normal;

    }

    .checkbox label {

        margin-bottom: 20px !important;

    }

    .roles {

        margin-bottom: 40px;

    }

<div class="roles">

    <input type="radio" name="role" value="ONE" id="one">

    <label class="role" for="one">ONE</label>

    <input type="radio" name="role" value="TWO" id="two">

    <label class="role" for="two">TWO</label>

</div>

Displaying cell border after selecting radio button

This solution is at jQuery and CSS.

The border is added by the class, method addClass(). The class itself must be added to your CSS:

.current {
  border: 1px solid green;
}

Also, method closest() is applied, which allows you to refer to the specified parent of the tag <td>.

$('input[type="radio"]').on('change', function() {
  $('input[type="radio"]').closest('td.current').removeClass('current');
  $(this).closest('td').addClass('current');
});

.current {
  border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="crna">
    <td>Crna</td>
    <td class="no-value"></td>
    <td>
      <input id="r-band2-crna" value="0" type="radio" name="prsten">
      <label for="r-band2-crna">0</label>
    </td>
    <td>
      <input id="r-band3-crna" value="0" type="radio" name="prsten"> 
      <label for="r-band3-crna">0</label>
    </td>
    <td>
      <input id="r-multi-crna" value="1" type="radio" name="prsten"> 
      <label for="r-multi-crna">x10<sup>0</sup></label>
    </td>
    <td class="no-value"></td>
    <td><input id="r-tcr-crna" value="250" type="radio" name="prsten">
       <label for="r-tcr-crna">±250</label>
    </td>
  </tr>
</table>

How to remove borders around fieldset containing radio buttons in html and css?

Just add below css :

fieldset {
  border: 0;
}

make radio button look like it has tick and border upon active

You should use hide the radio button and use the icon as the check. Use grid to list the labels which will be positioned relative and will serve as a container for the icon and text inside. you can use + selector and get the checked input:radio for the first sibling label and style it.

input[type=radio]:checked + label{
   border: 1px solid indigo;
  }
  
 input[type=radio]:checked + label > span.icon {
  display: inline-block;
 }

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
  <div>
    <h3 class="font-Rubik text-xs font-medium tracking-wide  uppercase mb-1 mt-3 text-tcolor">To‘lov summasi</h3>
    <div class="grid grid-cols-3 gap-2">
    
          <input class="hidden" id="1000" name="uzs" type="radio" checked />
        <label class="block w-full border p-2 relative" for="1000">
          <span class='hidden icon'><i class="fas fa-check border border-indigo-600 bg-indigo-600 text-white rounded-full text-xs p-1 absolute top-0 right-0 -m-2"></i></span>
          1000
          <span class="text-uzs text-xs font-Rubik font-normal">UZS</span>
        </label>
          <input class="hidden" id="5000" name="uzs" type="radio" />
        <label class="block w-full border p-2 relative" for="5000">
          <span class='hidden icon'><i class="fas fa-check border border-indigo-600 bg-indigo-600 text-white rounded-full text-xs p-1 absolute top-0 right-0 -m-2"></i></span>
          5000
          <span class="text-uzs text-xs font-Rubik font-normal">UZS</span>
        </label>
      
    </div>
  </div>

How do I make border-radius in radio buttons?

you need to add overflow hidden to .box class, so that the border radius cuts the underlaying content.

.box {
  width: 300px;
  height: 60px;
  background: red;
  display: flex;
  align-items: center;
  border-radius: 50px;
  overflow: hidden;
}
.item {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  color: red;
  justify-content: center;
  align-items: center;
}
.item_active {
  background: gray;
}

<div class="box">
  <div class="item_active item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

---

Related Topics