将 "Ship to a different Address" 复选框更改为字符串
Change the "Ship to a different Address" Checkbox to a String
我目前正在使用 woocommerce 我想知道是否可以将 checkbox 更改为一种字符串 (带有垃圾邮件、标签、..)的锚点。
我要修改的页面是 checkout 页面。在帐单详细信息 下方,客户可以单击一个复选框并放置一个不同的地址。选中其他字段时,会在复选框下方显示。
我想做的是删除复选框并用具有相同目的的字符串替换它。
有人知道我该怎么做吗?
代码:
<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>
我将提供一个仅使用 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>
我目前正在使用 woocommerce 我想知道是否可以将 checkbox 更改为一种字符串 (带有垃圾邮件、标签、..)的锚点。
我要修改的页面是 checkout 页面。在帐单详细信息 下方,客户可以单击一个复选框并放置一个不同的地址。选中其他字段时,会在复选框下方显示。
我想做的是删除复选框并用具有相同目的的字符串替换它。
有人知道我该怎么做吗?
代码:
<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>
我将提供一个仅使用 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>