CSS自定义单选按钮不能正常工作

时间：2017-06-19 06:53:37

标签： 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;
}

1 个答案:

答案 0 :(得分：0)

请参阅下文。添加了 session_start(); $ordernarpor = 'id'; if(isset($_GET['orderna'])) { $ordernarpor = $_GET['orderna']; $_SESSION['orderna'] = $ordernarpor; } else if(isset($_SESSION['orderna'])) { $ordernarpor = $_SESSION['orderna']; } $ordenar = ''; if ($ordenarpor== 'id') { $ordenar .= " ORDER BY id"; } elseif ($ordenarpor== 'nome') { $ordenar .= " ORDER BY nome"; } elseif ($ordenarpor== 'idade') { $ordenar .= " ORDER BY idade"; } elseif($ordenarpor== 'peso') { $ordenar .= " ORDER BY peso"; } $nomeServidor = "fsadxas-DEMO"; $opcao = array( "UID" => "sa", "PWD" => "xzcsa", "Database" => "demo"); $conexao = sqlsrv_connect($nomeServidor, $opcao); if( $conexao ) { $sql="SELECT * FROM cliente" . $ordenar; $aResult=sqlsrv_query($conexao, $sql); while($rows = sqlsrv_fetch_array($aResult)) { $id = $rows['id']; $nome = $rows['nome']; $idade = $rows['idade']; $peso = $rows['peso']; 的CSS并修复了label的一些设置。由于您的CSS使用label:after，因此在HTML中的标签之前指定了重要的输入（在下面进行了更改）。

input + label
$('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;
}

相关问题
最新问题