在WoodCommerce Wordpress[关闭]中编辑复选框的外观

Question

这是伟大的和所有，但我希望它看起来就像交付复选框。我不想点击复选框来显示价格，而是希望在交付费下有“组装”，在右侧，我希望默认选项为“无组装”，而在“组装”下的选项为170欧元（每种产品）。我做了几张截图，并用Photoshop处理了我需要的东西。

这就是它不检查时的样子（蒙塔日）。

这就是它被选中时的样子——我只想禁用第一个复选框，所以它看起来就像它被选中时的样子。

这就是我要找的。

我希望既然你在WooCommerce上默认有交付的复选框，那么添加相同的复选框，只是有不同的选项将很容易解决。

我正在使用“显示”复选框在Woocommerce结帐页面回答代码中添加费用

请帮帮我：）

Answer 1

如果没有看到复选框的超文本标记语言代码，我们就无法知道元素使用的ID或类，但这是自定义复选框的一些基本样式。尝试将其合并到样式表中。

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before { font-family: FontAwesome; display: inline-block; }
input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */
input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div>
  <input id="box1" type="checkbox" />
  <label for="box1">Checkbox 1</label>
</div>