Question

我目前正在使用 woocommerce ，我想知道是否可以将复选框更改为某种字符串（带有垃圾邮件，标签，...的锚点））。

我要修改的页面是结帐页面。通过结算明细，客户可以点击复选框并输入其他地址。选中后，其他字段表单会显示在复选框旁边。

我想要做的是删除复选框并将其替换为具有相同目的的字符串。

有人知道我该怎么办？

代码：

<h2 id="ship-to-different-address">
  <label for="ship-to-different-address-checkbox" class="checkbox"><?php _e( 'Ship to a different address?', 'woocommerce' ); ?></label>
  <input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1"/>
</h2>

Answer 1

我将提供仅使用CSS的解决方案，以及对HTML元素的轻微重新排序。运行代码段以查看其是否有效。

基本上发生了什么，<label>的样式就像一个按钮，复选框隐藏在屏幕外，其:checked状态用于设置标签的活动状态。

/*hide the checkbox*/
.checkbox-button .input-checkbox:not(:checked),
.checkbox-button .input-checkbox:checked {
  position: absolute;
  left: -9999px;
}
/*style the label like a button */
.checkbox-button .input-checkbox + label {
  font-family: Ariel, sans-serif;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  padding: 6px 10px;
  background: #efefef;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
/* style the label/button active state*/
/* (only applied when the checkbox is 'checked' */
.checkbox-button .input-checkbox:checked + label {
  background: #656565;
  color: #ffffff;
  border: 1px solid #888888;
}

<h2 id="ship-to-different-address" class="checkbox-button">
    <input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1"/>
    <label for="ship-to-different-address-checkbox" class="checkbox">
      Ship to a different address?
    </label>
</h2>

将“发送到其他地址”复选框更改为字符串

1 个答案: