CODEWITHSUNDEEP
htmlcss
RRB
RRB

Reputation: 2116

Change radio button outer border color and thickness

I am trying to change 2 radio buttons border color and border thickness but for some reason it is not doing anything.

Here is my code

input[type='radio']:after {
  width: 10px;
  height: 10px;
  border-radius: 15px;
  top: -5px;
  left: 3px;
  position: relative;
  background-color: transparent;
  content: '';
  display: inline-block;
  visibility: visible;
  border: none;
}

input[type='radio']:checked:after {
  width: 10px;
  height: 10px;
  border-radius: 15px;
  top: -5px;
  left: 2.7px;
  position: relative;
  background-color: #f07f09;
  content: "";
  display: inline-block;
  visibility: visible;
  border: none;
}

input[type=radio]:checked {
  border-color: #bbbbbb;
  border: solid 3px;
}

input[type=radio]:checked:before {
  border-color: #bbbbbb;
  border: solid 3px;
}
<input type="radio" name="contact-option" id="1" class="otp-text-gap" [(ngModel)]="contact" value="cell" (change)="changeOTPChannel()"><span class="otp-channel-text">Cell number</span>
<input type="radio" name="contact-option" id="2" class="otp-text-gap" [(ngModel)]="contact" value="email" (change)="changeOTPChannel()"><span class="otp-channel-text">Email</span>

Upvotes: 0

Views: 3538

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

  • There are a few things which you should keep in mind, pseudo-classes are not supported by input types
  • you should not add an id as a number

In this below example I have used the label to trigger onchange for radio

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

input[type='radio'] + label{
  display:inline-block;
  position:relative;
  padding-left: 25px;
  margin-right:20px;
}

input[type='radio']:checked + label:after {
    width: 10px;
    height: 10px;
    border-radius: 15px;
    top: 4px;
    left: 4px;
    position: absolute;
    background-color: #f07f09;
    content: "";
}

input[type=radio] + label:before {
    content: "";
    border-color: #bbbbbb;
    border: solid 3px;
    width: 13px;
    position: absolute;
    left: 0;
    height: 13px;
    border-radius: 50%;
}
<input type="radio" name="contact-option" id="one" class="otp-text-gap" [(ngModel)]="contact" value="cell" (change)="changeOTPChannel()"><label for="one" class="otp-channel-text">Cell number</label>
<input type="radio" name="contact-option" id="two" class="otp-text-gap" [(ngModel)]="contact" value="email" (change)="changeOTPChannel()"><label for="two" class="otp-channel-text">Email</label>

Upvotes: 2

Related Questions