时间戳

首页 > 解决方案 > CSS 高亮选中的按钮

javascript - CSS 高亮选中的按钮

问题描述

我正在尝试对应用程序引入的代码进行样式设置，因此我无法调整 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>

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

标签： javascriptjqueryhtmlcss

解决方案

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

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

推荐阅读