CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Erin V.
Erin V.

Reputation: 21

CSS to Highlight a Selected Button

I am trying to style code brought in by an app, so I don't have the ability to adjust the HTML.

My goal was to turn a radio button input into a clickable button with the radio select option hidden. So far, I have accomplished this with the exception of highlighting the selected button. I can't seem to figure out how to target the label when the radio button is checked as it is a parent of the input.

I've tried targeting the label with CSS and jQuery but neither have worked.

$(document).ready(function() {
  $(".bold_options label").click(function() {
    $(".bold_options label").removeClass("selected");
    $(this).addClass("selected")
  })
})
.bold_options input[type="radio"] {
  display: none;
}

.bold_options label {
  display: inline-block;
  float: left;
  min-width: 36px;
  height: $sw-height;
  /* No extra spacing between them */
  margin: 0;
  /* Styling text */
  font-size: 13px;
  text-align: center;
  line-height: $sw-height;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  border: 2px solid #C0C2BF !important;
  background-color: {
    {
      settings.color_swatches_btn
    }
  }
  ;
  color: {
    {
      settings.color_swatches_text
    }
  }
  ;
  background-position: center;
  padding: 0 10px;
}

.selected {
  outline-color: transparent;
  border: 2px solid #F9DDD2 !important;
  font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="bold_option_value ">
 <label>
  <span class="bold_option_value_element">
   <input type="radio" class="rb_905341_375591" name="properties[EDGES]" value="DECKLE HAND-TORN EDGES" data-option_value_key="0">
  </span>
<span class="bold_option_value_title">DECKLE HAND-TORN EDGES</span>
</label>
</span>

When clicking on the button, the border color should change to highlight it is the selected button.

Upvotes: 1

Views: 5277

Answers (2)

yunzen
yunzen

Reputation: 33439

Look at this. I only needed to change the class names

$(document).ready(function() {
  $(".bold_option_value label").click(function() {
    $(".bold_option_value label").removeClass("selected-label");
    $(this).addClass("selected-label")
  })
})
.bold_option_value input[type="radio"] {
  display: none;
}

.bold_option_value label {
  display: inline-block;
  float: left;
  min-width: 36px;
  height: $sw-height;
  /* No extra spacing between them */
  margin: 0;
  /* Styling text */
  font-size: 13px;
  text-align: center;
  line-height: $sw-height;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  border: 2px solid #C0C2BF !important;
  background-color: lightblue;
  color: darkblue;
  background-position: center;
  padding: 0 10px;
}

label.selected-label {
  outline-color: transparent;
  border: 2px solid #F9DDD2 !important;
  font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="bold_option_value ">
 <label>
  <span class="bold_option_value_element">
   <input type="radio" class="rb_905341_375591" name="properties[EDGES]" value="DECKLE HAND-TORN EDGES" data-option_value_key="0">
  </span>
  <span class="bold_option_value_title">DECKLE HAND-TORN EDGES</span>
 </label>
</span>
<span class="bold_option_value ">
 <label>
  <span class="bold_option_value_element">
   <input type="radio" class="rb_905341_375591" name="properties[EDGES]" value="OTHER EDGES" data-option_value_key="1">
  </span>
  <span class="bold_option_value_title">OTHER EDGES</span>
 </label>
</span>

Upvotes: 0

Randy Casburn
Randy Casburn

Reputation: 14165

Based upon this: My goal was to turn a radio button input into a clickable button with the radio select option hidden., I think this is what you are after:

$(document).ready(function() {
  $(".bold_option_value_element").parent().hide();
  $(".bold_option_value").append('<button class="something">DECKLE HAND-TORN EDGES</button>');


  $(".something").click(function() {
    alert('You clicked the new button');
  })
})
.bold_options input[type="radio"] {
  display: none;
}

.bold_options label {
  display: inline-block;
  float: left;
  min-width: 36px;
  height: $sw-height;
  /* No extra spacing between them */
  margin: 0;
  /* Styling text */
  font-size: 13px;
  text-align: center;
  line-height: $sw-height;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  border: 2px solid #C0C2BF !important;
  background-color:
  background-position: center;
  padding: 0 10px;
}

.selected {
  outline-color: transparent;
  border: 2px solid #F9DDD2 !important;
  font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="bold_option_value ">
 <label>
  <span class="bold_option_value_element">
   <input type="radio" class="rb_905341_375591" name="properties[EDGES]" value="DECKLE HAND-TORN EDGES" data-option_value_key="0">
  </span>
<span class="bold_option_value_title">DECKLE HAND-TORN EDGES</span>
</label>
</span>

Upvotes: 1

Related Questions