CODEWITHSUNDEEP
css
arunkumar
arunkumar

Reputation: 353

Radio button styles not getting changed

I'm trying to implement custom styles for radio buttons.

I've almost achieved it but issue is when i try to click on other radio button it is not getting highlighted.

I'm struck here please help.

.radio-radio-wrapper {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

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

.radio-radio-wrapper label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
  cursor: pointer;
}

.radio-radio-wrapper input[type=radio]:checked+span>label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 4px;
  content: " ";
  display: block;
  background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
  <span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity &amp; Partial Service</label></span>
  </span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Full Network Service (No Capacity)</label></span>
  </span>
</div>

Upvotes: 0

Views: 64

Answers (2)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

Here is the perfectly working code for your quick reference

.radio-radio-wrapper {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

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

.radio-radio-wrapper label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
  cursor: pointer;
}

.radio-radio-wrapper input[type=radio]:checked+span>label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 11px;
  left: 12px;
  content: " ";
  display: block;
  background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
  <span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity &amp; Partial Service</label></span>
  </span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
  </span>
</div>

Upvotes: 0

Red
Red

Reputation: 7324

You forgot the unique id's. Both id's are radio1. You should set it to radio1 and radio2 and so on.

And don't forget the labels for property to link to the correct input field. See below.

.radio-radio-wrapper {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

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

.radio-radio-wrapper label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
  cursor: pointer;
}

.radio-radio-wrapper input[type=radio]:checked+span>label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 4px;
  content: " ";
  display: block;
  background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
  <span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity &amp; Partial Service</label></span>
  </span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
  </span>
</div>

Upvotes: 2

Related Questions