javascript - 自定义单选按钮不显示两个按钮

Question

我正在尝试仅使用 CSS 来修改 Wordpress 插件上的一些默认单选按钮。我已检查网页以获取所需的变量，但无法使其正常工作。

• 不，谢谢(功能正常，按钮丢失)
• 是的，每个月(功能正常，显示按钮)

第二个自定义单选按钮显示和功能正常...但是我根本无法显示第一个单选按钮(单击文本的功能仍然有效，所以我认为这纯粹是显示问题)。

我是否遗漏了一些明显的东西？

网页单选按钮代码:

/*Remove Default Radio Button */

input[type=radio] {
  display: none;
}


/*Add new radio buttons*/

[type="radio"] + span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.25em;
  border-radius: 1em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.15em #000;
  margin-right: 0.75em;
  transition: 0.5s ease all;
}

[type="radio"]:checked + span::before {
  background: #61ce70;
  box-shadow: 0 0 0 0.25em #000;
}

<ul class="wcsatt-options-cart">
  <li>
    <label>
          <input type="radio" name="convert_to_sub" value="0">
          No thanks. 
        </label>
  </li>
  <li>
    <label>
          <input type="radio" name="convert_to_sub" value="1_month" checked="checked">
            Yes, <span class="subscription-details">every month</span>.                 
          </label>
  </li>
</ul>

提前致谢!

Answer 1

您错过了写作 <span>

与<span> 相关的自定义按钮哪个样式 CSS .

/*Remove Default Radio Button */

input[type=radio] {
  display: none;
}


/*Add new radio buttons*/

[type="radio"] + span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.25em;
  border-radius: 1em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.15em #000;
  margin-right: 0.75em;
  transition: 0.5s ease all;
}

[type="radio"]:checked + span::before {
  background: #61ce70;
  box-shadow: 0 0 0 0.25em #000;
}

<ul class="wcsatt-options-cart">
  <li>
    <label>
          <input type="radio" name="convert_to_sub" value="0">
          <span>No thanks. </span>
        </label>
  </li>
  <li>
    <label>
          <input type="radio" name="convert_to_sub" value="1_month" checked="checked">
            <span class="subscription-details">Yes, every month</span>.                 
          </label>
  </li>
</ul>