首页  >  问答  >  正文

使用Tailwind CSS更改父级div的样式,以响应单选按钮的选中状态

<p>我有一个带有多个列和每行一个单选按钮的表格。当我选择特定的按钮时,我需要改变整行的背景颜色。这个能实现吗?</p> <pre class="brush:php;toolbar:false;"><tr class="flex items-center p-4 space-x-4 border hover:bg-indigo-50"> <input type="radio" name="user" id="{{ user.id }}"> <label for="{{ user.id }}">{{ user.email }}</label> <div>{{ user.name }}</div> </tr></pre> <p>在Tailwind中,可以使用"peer"类来样式化相邻的块。但是我需要样式化父级块(当<input>被选中时,父级块的背景颜色应该改变)。</p>
P粉718165540P粉718165540455 天前573

全部回复(1)我来回复

  • P粉958986070

    P粉9589860702023-08-16 21:48:18

    可以使用伪类 :has(),但是它在浏览器中的支持有限(例如:Mozilla 不支持)。您可以查看这个选择器的 浏览器支持情况

    tr:has(input:checked){
        background: green;
    }
    <script src="http://cdn.tailwindcss.com"></script>
    
    <table>
        <tr class="flex items-center p-4 space-x-4 border hover:bg-indigo-50">
            <td>
                <input type="radio" name="user" id="{{ user.id }}">
                <label for="{{ user.id }}">{{ user.email }}</label>
                <div>{{ user.name }}</div>
            </td>
        </tr>
    </table>

    回复
    0
  • 取消回复