自定义单选按钮不同时显示两个按钮

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>

Answer 2

请尝试以下操作：

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

CSS：-

/*Remove Default Radio Button */
.wcsatt-options-cart input[type=radio] {
   position: absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   cursor: pointer;   
   opacity: 0;
}

.wcsatt-options-cart label { position: relative; }
/*Add new radio buttons*/

[type="radio"] + span.label-wrap::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.label-wrap::before {
  background: #61ce70;
  box-shadow: 0 0 0 0.25em #000;
}