CSS 高亮选中的按钮

Question

我正在尝试设置应用程序引入的代码样式，因此我无法调整 HTML。

我的目标是将单选按钮输入变成一个可点击的按钮，并隐藏单选选项。到目前为止，除了突出显示选定的按钮之外，我已经完成了这项工作。当单选按钮被选中时，我似乎无法弄清楚如何定位标签，因为它是输入的父级。

我尝试使用 CSS 和 jQuery 来定位标签，但都没有成功。

$(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>

单击按钮时，边框颜色应更改以突出显示它是选定的按钮。

Answer 1

基于此：我的目标是将单选按钮输入变成隐藏单选按钮的可点击按钮。，我认为这就是您所追求的：

$(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>

Answer 2

看看这个。我只需要更改类名

$(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>