html - CSS 自定义单选按钮无法正常工作

标签 html css

我正在尝试构建我的自定义单选按钮。我希望它们有一个更大的白色边框，当选中单选按钮时，我希望其中有一个白点。像这样:

https://ibb.co/iBjJHk

但它不起作用，我无法再检查单选按钮... 如果可能，我正在寻找纯 CSS 解决方案。

到目前为止，这是我尝试过的，相关部分位于 CSS 的顶部。

https://codepen.io/Insane415/pen/zzoBmp

HTML

<table class="pricing-table">
    <tr>
      <td id="table-heading"><h1>Leistungen &amp; Preise Telefonservice</h2></td>
      <td>
        <label for="test">AllIn-Order</label>
        <input type="radio" id="test" name="tarif-top">
</td>
      <td class="red-background">AllIn-Time<br>
        <input type="radio" checked name="tarif-top" value="allin-time"/></td>
      <td>AllIn-Contact<br>
        <input type="radio" name="tarif-top" value="allin-contact"/></td>
      <td>
        Enterprise<br>
        <input type="radio" name="tarif-top" value="enterprise"/>
      </td>
    </tr>
    <tr>
      <td>Monatliche Grundgebühr</td>
      <td colspan="3">nur 59,90€</td>
      <td>individuell</td>
    </tr>
    <tr>
      <td>Telefonische Annahmezeit</td>
      <td colspan="3">Mo-Fr 08:00 bis 19:00 Uhr</td>
      <td>24/7</td>
    </tr>
    <tr>
      <td>Kosten pro Minute/Kontakt</td>
      <td>0,69€/Minute</td>
      <td class="red-background">0,89€/Minute</td>
      <td>3,00€/Kontakt</td>
      <td>individuell</td>
    </tr>
    <tr>
      <td>Transaktionsgebühren</td>
      <td>12,5%/Bestellung</td>
      <td class="red-background">—</td>
      <td>—</td>
      <td>individuell</td>
    </tr>
    <tr id="services">
      <td>Enthaltene Leistungen</td>
    </tr>
    <tr>
      <td>Englischsprachiger Telefonservice</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Kundenservice für Markplätze</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Bestellannahme für Waren</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Anrufnotiz via E-Mail</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Anrufnotiz via E-Mail</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Monatliches Reporting</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Weiterleitung Festnetz (DE)</td>
      <td colspan="3">0,09€/Minute</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Weiterleitung Mobilfunknetz (DE)</td>
      <td colspan="3">0,25€/Minute</td>
      <td>Check</td>
    </tr>
     <tr>
      <td>Buchungsannahme</td>
      <td colspan="3">—</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Outbound-Kampagnen</td>
      <td colspan="3">—</td>
      <td>Check</td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="radio" value="allin-order" name="tarif-bottom"/>
        <br>AllIn-Order
      </td>
      <td class="red-background">
        <input type="radio" checked name="tarif-bottom" value="allin-time"/>
        <br>AllIn-Time
      </td>
      <td>
        <input type="radio" name="tarif-bottom" value="allin-contact"/>
        <br>AllIn-Contact
      </td>
      <td>
        <input type="radio" name="tarif-bottom" value="enterprise"/>
        <br>Enterprise
      </td>
    </tr>
</table>

CSS

/*BEGIN Custom Radio Button*/

#test{
  display: none;
}

label:before{
  content: '';
  width: 25px;
  height: 25px;
  border: 3px solid white;
  display: inline-block;
  border-radius: 100%;
  position: absolute;
  top: 50px;
}

input[type="radio"]:checked + label:after{
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: white;
  display: inline-block;
}

label:hover{
  cursor: pointer;
}

/*END Custom Radio Button*/

.pricing-table{
  text-align: center;
}

.pricing-table td{
  background-color: #ccc;
  padding: 12px;
}

.pricing-table tr td:first-child{
  background-color: #ddd;
  text-align: left;
}

.pricing-table tr td:last-child{

}

.pricing-table tr:last-child td:first-child{
  background-color: white;
}

.pricing-table #services td, #table-heading{
  font-weight: 600;
    background-color: white;
}

.pricing-table tr:first-child td:nth-of-type(1n+2), .pricing-table tr:last-child td {
  background-color: #545067;
  color: white;
}

.red-background{
  color: white!important;
  background-color: #E22C26!important;
}
/* BEGIN Radio Buttons*/

/*END Radio Buttons*/

.tarif-choice hr{
  border-color: #E22C26;
}

ul.optional {
  background-color: #ddd;
  padding: 0;
}

ul.optional input{
  margin-right: 10px;
  margin-left: 15px;
}

ul.optional li{
  list-style-type: none;
  border-top: 1px solid silver;
}

ul.optional p{
  margin-left: 30px;
  margin-top: 0;
  margin-bottom: 0;
}

ul.optional p:before {
  content: "•";
  margin-right: 6px;
}

.checkbox-holder{
  margin-left: 25px;
}

.checkbox-holder .checkbox-space{
  margin-left: 50px;
}

最佳答案

请看下面。为 label 添加了 CSS，并为 label:after 修复了一些设置。由于您的 CSS 使用 input + label，因此在 HTML 中的标签之前指定输入很重要(下面已更改)。

$('input[type="radio"]').change(function(){
  if($(this).val()=='allin-order'){
    $(":radio[value=allin-order]").prop("checked", true);
    $(".pricing-table td").removeClass("red-background");
    $(".pricing-table tr:first-child td:nth-of-type(2)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(4) td:nth-of-type(2)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(5) td:nth-of-type(2)").addClass("red-background");
    $(".pricing-table tr:last-child td:nth-of-type(2)").addClass("red-background");
  };
  if($(this).val()=='allin-time'){
    $(":radio[value=allin-time]").prop("checked", true);
    $(".pricing-table td").removeClass("red-background");
    $(".pricing-table tr:first-child td:nth-of-type(3)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(4) td:nth-of-type(3)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(5) td:nth-of-type(3)").addClass("red-background");
    $(".pricing-table tr:last-child td:nth-of-type(3)").addClass("red-background");
  };
  if($(this).val()=='allin-contact'){
    $(":radio[value=allin-contact]").prop("checked", true);
    $(".pricing-table td").removeClass("red-background");
    $(".pricing-table tr:first-child td:nth-of-type(4)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(4) td:nth-of-type(4)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(5) td:nth-of-type(4)").addClass("red-background");
    $(".pricing-table tr:last-child td:nth-of-type(4)").addClass("red-background");
  };
  if($(this).val()=='enterprise'){
    $(":radio[value=enterprise]").prop("checked", true);
    $(".pricing-table td").removeClass("red-background");
    $(".pricing-table tr:first-child td:nth-of-type(5)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(4) td:nth-of-type(5)").addClass("red-background");
    $(".pricing-table tr:nth-of-type(5) td:nth-of-type(5)").addClass("red-background");
    $(".pricing-table tr:last-child td:nth-of-type(5)").addClass("red-background");
  };
});
/*BEGIN Custom Radio Button*/

#test{
  display: none;
}
label { display: inline-block; position: relative; }

label:after{
  content: '';
  width: 25px;
  height: 25px;
  border: 3px solid white;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  right: 25px;
}

input[type="radio"]:checked + label:after{
  content: '';
  width: 25px;
  height: 25px;
  border: 3px solid white;
  border-radius: 50%;
  background: white;
  display: inline-block;
}

label:hover{
  cursor: pointer;
}

/*END Custom Radio Button*/

.pricing-table{
  text-align: center;
}

.pricing-table td{
  background-color: #ccc;
  padding: 12px;
}

.pricing-table tr td:first-child{
  background-color: #ddd;
  text-align: left;
}

.pricing-table tr td:last-child{
  
}

.pricing-table tr:last-child td:first-child{
  background-color: white;
}

.pricing-table #services td, #table-heading{
  font-weight: 600;
    background-color: white;
}

.pricing-table tr:first-child td:nth-of-type(1n+2), .pricing-table tr:last-child td {
  background-color: #545067;
  color: white;
}

.red-background{
  color: white!important;
  background-color: #E22C26!important;
}
/* BEGIN Radio Buttons*/

/*END Radio Buttons*/

.tarif-choice hr{
  border-color: #E22C26;
}

ul.optional {
  background-color: #ddd;
  padding: 0;
}

ul.optional input{
  margin-right: 10px;
  margin-left: 15px;
}

ul.optional li{
  list-style-type: none;
  border-top: 1px solid silver;
}

ul.optional p{
  margin-left: 30px;
  margin-top: 0;
  margin-bottom: 0;
}

ul.optional p:before {
  content: "•";
  margin-right: 6px;
}

.checkbox-holder{
  margin-left: 25px;
}

.checkbox-holder .checkbox-space{
  margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="pricing-table">
    <tr>
      <td id="table-heading"><h1>Leistungen &amp; Preise Telefonservice</h2></td>
      <td>
        <input type="radio" id="test" name="tarif-top">
         <label for="test">AllIn-Order</label>
</td>
      <td class="red-background">AllIn-Time<br>
        <input type="radio" checked name="tarif-top" value="allin-time"/></td>
      <td>AllIn-Contact<br>
        <input type="radio" name="tarif-top" value="allin-contact"/></td>
      <td>
        Enterprise<br>
        <input type="radio" name="tarif-top" value="enterprise"/>
      </td>
    </tr>
    <tr>
      <td>Monatliche Grundgebühr</td>
      <td colspan="3">nur 59,90€</td>
      <td>individuell</td>
    </tr>
    <tr>
      <td>Telefonische Annahmezeit</td>
      <td colspan="3">Mo-Fr 08:00 bis 19:00 Uhr</td>
      <td>24/7</td>
    </tr>
    <tr>
      <td>Kosten pro Minute/Kontakt</td>
      <td>0,69€/Minute</td>
      <td class="red-background">0,89€/Minute</td>
      <td>3,00€/Kontakt</td>
      <td>individuell</td>
    </tr>
    <tr>
      <td>Transaktionsgebühren</td>
      <td>12,5%/Bestellung</td>
      <td class="red-background">—</td>
      <td>—</td>
      <td>individuell</td>
    </tr>
    <tr id="services">
      <td>Enthaltene Leistungen</td>
    </tr>
    <tr>
      <td>Englischsprachiger Telefonservice</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Kundenservice für Markplätze</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Bestellannahme für Waren</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Anrufnotiz via E-Mail</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Anrufnotiz via E-Mail</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Monatliches Reporting</td>
      <td colspan="3">Check</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Weiterleitung Festnetz (DE)</td>
      <td colspan="3">0,09€/Minute</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Weiterleitung Mobilfunknetz (DE)</td>
      <td colspan="3">0,25€/Minute</td>
      <td>Check</td>
    </tr>
     <tr>
      <td>Buchungsannahme</td>
      <td colspan="3">—</td>
      <td>Check</td>
    </tr>
    <tr>
      <td>Outbound-Kampagnen</td>
      <td colspan="3">—</td>
      <td>Check</td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="radio" value="allin-order" name="tarif-bottom"/>
        <br>AllIn-Order
      </td>
      <td class="red-background">
        <input type="radio" checked name="tarif-bottom" value="allin-time"/>
        <br>AllIn-Time
      </td>
      <td>
        <input type="radio" name="tarif-bottom" value="allin-contact"/>
        <br>AllIn-Contact
      </td>
      <td>
        <input type="radio" name="tarif-bottom" value="enterprise"/>
        <br>Enterprise
      </td>
    </tr>
</table>

<!-- END table -->


<h2>Buchungsübersicht</h2>
<div class="row">
  <div class="col-md-6">
    <div class="tarif-choice">
      <p>Ihre Tarifauswahl</p>
      <hr/>
      <div class="allin-time">
    <ul>
      <li>mtl. Grundgebühr 59,90€</li>
      <li>0,89€/Minute</li>
      <li>Servicezeit: Mo-Fr 08:00-19:00 Uhr</li>
        </ul>
        
        <ul class="check">
          <li>Mehrsprachiger Telefonservice</li>
          <li>Bestellannahme für Waren</li>
          <li>Buchungsannahme</li>
          <li>Anrufnotiz via E-Mail</li>
          <li>Monatliches Reporting</li>
          <li>Einzelverbindungsnachweis</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <p>Optionale Leistungen &#124; | Diese Leistungen werden nur abgerechnet,
 soweit Sie sich aktiv für den Service entschieden haben
       <ul class="optional">
         <li><input type="checkbox"/>Service Zeit 24/7
           <p class="dot">Kosten: 19,90 €/E-Mail</p>
        </li>
  <li><input type="checkbox"/>Anrufnotiz via SMS
           <p class="dot">Kosten: 0,20 €/SMS</p>
        </li>
<li><input type="checkbox"/>E-Mail-Service
           <p class="dot">Servicezeit: Mo-Fr 08:00-19:00 Uhr</p>
           <p class="dot">Kosten: 4,49 €/E-Mail</p>
        </li>
<li><input type="checkbox"/>Chat-Service
           <p class="dot"/>Live-Chat. WhatsApp & Facebook-Messenger Service</p>
    <p class="dot"/>Servicezeit: Mo-Fr 08:00-19:00 Uhr</p>
  <p class="dot"/>Kosten (2 Abrechnungsmodelle möglich): </p>
<div class="checkbox-holder">
  <input type="checkbox"/>5,49€/Chat
  <span class="checkbox-space"><input type="checkbox"/>0,69€/Minute</span>
</div>
        </li>
<li><input type="checkbox"/>Click-to-Message Service
           <p class="dot"/>Servicezeit: Mo-Fr 08:00-19:00 Uhr</p>
<p class="dot">0,20 €/SMS</p>
        </li>
      </ul>
  </div>
</div>

关于html - CSS 自定义单选按钮无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44624009/

上一篇：html - CSS3 : show border on focus to the both textbox

下一篇：css - Firebug 的计算选项卡不再显示值的计算

相关文章：

html - 没有水平分隔符的表类 ".table"

html - 光标指针在随机时间停止工作？

javascript - 在表单字段已满之前保持提交按钮处于禁用状态

javascript - 使用 jquery 或 javaScript 更改背景位置的值

javascript - 为什么我的 Canvas 仅在刷新时加载？

css - 如何将 div 与视口(viewport)垂直对齐，同时将其与文档水平对齐？

jquery - 如何通过 jquery 或其他类型修改 iframe 中的 css？

css - Django(生产服务器)LESS 不渲染

javascript - 如何使用延迟 TweenMax.to 制作动画？

javascript - 选择时表单中的重复字段

©2024 IT工具网  联系我们