CODEWITHSUNDEEP
htmlcsspseudo-elementpseudo-class
jane
jane

Reputation: 241

Input type checked in checkbox to transform using CSS

I have an input type with content ">" , shown in below pic, clicking on which a row of a table expands.

enter image description here

I have used input type "checkbox" which when checked, I want to transform the ">" to rotate by 90 degrees. Below is the code,

input:checked + .tab-label::after {
            transform: rotate(90deg);
        }

However, the rotate doesnt happen even. I have tried multiple things but havent been able to figure out where I have made a mistake. Note that I cant use javascript as per my requiremnt. Please help.

here is the fiddle with entire code: https://jsfiddle.net/g8nmu09d/1/

Upvotes: 0

Views: 352

Answers (1)

Luis Lobo
Luis Lobo

Reputation: 859

The way the code is, it's impossible with just CSS. That's because the HTML structure is like this (simplified):

<table>
    <tbody>
        <tr>
            <td>
                <label for="row2">Label</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="row2">
            </td>
        </tr>
    </tbody>
</table>

Following the rules of CSS, the very name C (Cascading) defines that CSS follows the rule from the parent element to the child. The most CSS allows is to select siblings, not parent elements.

This means, in practice, that your CSS won't work because the input:checked is in another td and as the CSS doesn't "go up" you won't be able to do it that way. You therefore need to change your HTML to one where the label and input:checked are at least at the same level.

Or you solve this with the JS change event...

Upvotes: 0

Related Questions