单选按钮检查属性不起作用

【问题标题】：radio button checked property not working单选按钮检查属性不起作用
【发布时间】：2015-11-30 15:13:02
【问题描述】：

我正在尝试在收音机标签上悬停效果，因为它工作正常，但我想要实现的是：

如果我选择一个单选按钮，相应的标签应该有一些背景颜色

我尝试了很多组合，但对我不起作用。任何帮助将不胜感激。

.checkout_beautify {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 400ms;
    border-radius: 25px;
    text-align: center;
}
.checkout_beautify:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=bank_transfer]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=icicipg]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
/*COMBINATIONS I TRIED*/

.radio input[type="radio"]:checked {
    background: pink !important;
}
.radio input[type="radio"]:checked ~ * {
    background: pink !important;
}
<table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payu" id="payu" checked="checked">
            </td>
            <td>
                <label for="payu">
                    <h3 class="checkout_beautify"><b>PAYU MONEY -  (Credit/Debit/NetBanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="icicipg" id="icicipg">
            </td>
            <td>
                <label for="icicipg">ICICI PAYMENT GATEWAY - (Credit/Debit)</label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="citrus" id="citrus">
            </td>
            <td>
                <label for="citrus">
                    <h3 class="checkout_beautify"><b>CITRUS - (Netbanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer">
            </td>
            <td>
                <label for="bank_transfer">
                    <h3><b>DEPOSIT IN BANK</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

【问题讨论】：

  • 你有上面指定问题的url吗？
  • 有了这个标记，CSS是不可能的。
  • 我认为您应该将无线电输入和标签放在同一个 td 中，然后需要尝试使用兄弟（~）选择器
  • link 但您需要先添加项目然后查看付款方式
  • 你不能在 css 中设置父兄弟选择器。你需要使用jquery。这是实现此输出的最佳方式。

标签： html css radio-button


【解决方案1】：

您必须更改标签父级并放入相同的 &lt;td&gt; 以便 css 为它工作，

.checkout_beautify {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 400ms;
    border-radius: 25px;
    text-align: center;
}
.checkout_beautify:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=bank_transfer]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=icicipg]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
/*CHANGE FOLLOWING*/
.radio input[type="radio"]:checked + label {
    background: pink;
}
.radio input[type="radio"]:checked + label * {
    background: pink;
}

label { float:left; clear:none; }
input[type=radio] { float:left; clear:none; margin: 2px 0 0 20px; }
<table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payu" id="payu" checked="checked">
            
                <label for="payu">
                    <h3 class="checkout_beautify"><b>PAYU MONEY -  (Credit/Debit/NetBanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="icicipg" id="icicipg">
            
                <label for="icicipg">ICICI PAYMENT GATEWAY - (Credit/Debit)</label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="citrus" id="citrus">
            
                <label for="citrus">
                    <h3 class="checkout_beautify"><b>CITRUS - (Netbanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer">
            
                <label for="bank_transfer">
                    <h3><b>DEPOSIT IN BANK</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

您必须使用 css 进行适当的布局。

如果您想在您的代码中使用 Jquery，那么它很好，您可以轻松实现它。喜欢，

DEMO FIDDLE

【讨论】：

    【解决方案2】：

    您可以遵循以下方法，但您必须调整您的 HTML。

    使用input[type="radio"]:checked+label{ background: pink !important; } 为紧跟在已检查的radio 类型输入之后的标签编写css。

    参考：https://stackoverflow.com/a/1431788/3008050

    .checkout_beautify {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 400ms;
    border-radius: 25px;
    text-align: center;
}
.checkout_beautify:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=bank_transfer]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=icicipg]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
/*COMBINATIONS I TRIED*/

.radio input[type="radio"]:checked {
    background: pink !important;
}
.radio input[type="radio"]:checked ~ * {
    background: pink !important;
}

input[type="radio"]:checked+label{ background: pink !important; } 
    <table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payu" id="payu" checked="checked">
             <label for="payu">PAYU MONEY -  (Credit/Debit/NetBanking)</label>
            </td>
        </tr>
<tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payy" id="payy">
             <label for="payy">Test</label>
            </td>
        </tr>
    </tbody>
</table>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2011-04-06
      • 2013-08-21
      • 1970-01-01
      • 2016-09-12
      • 1970-01-01
      • 2012-09-30
      • 1970-01-01
      • 2012-08-21
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode