Input type checked in checkbox to transform using CSS

Question

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

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/

Your input must appear in the flow of the document ahead (upper in the tree) of the other element to style . example https://jsfiddle.net/a657y4ve/ — G-Cyrillus, Sep 12 '22 at 17:11
@G-Cyrillus ,Thanks , I have two questions : 1. Any idea why the input tag needs to be moved up the tree ? 2. The solution doesnt work when there are multiple rows, as clicking on ">" opens and closes all the rows at once, here is the fiddle : jsfiddle.net/Lpr2qx1z — jane, Sep 12 '22 at 18:18
CSS selector can only go down the HTML structure, there is no parent selectors. If you need multiple open/close , you need to use a input and a label for each of them, that means a unique selector too. example https://jsfiddle.net/z9rhqpw2/ — G-Cyrillus, Sep 12 '22 at 18:59
Many thanks, however the solution using the data label doesnt work at my end. I am trying for a simpler solution as the table is part of an email template and email templates still use primitive tech. I have been trying and have reached a dead end trying to create the "rotate" feature. Everything except rotate works from this fiddle : https://jsfiddle.net/g8nmu09d/1/ — jane, Sep 13 '22 at 16:48
Here is a fiddle with rotate feature that works fine everywhere, even in email templates : https://jsfiddle.net/ygrv6n91/ , however the same code to rotate ">" by 90 degrees doesnt work in a table, as seen in this fiddle : jsfiddle.net/g8nmu09d/1 — jane, Sep 13 '22 at 17:30
@G-Cyrillus, the problem with jsfiddle.net/z9rhqpw2 is that the row on-clicking doesnt expand/collapse in the email template where I am using the table. — jane, Sep 13 '22 at 17:33
Hello, well , i'm not sure that these CSS rules can be understood through mail . I'm also not familiar with email styling, i won't be of any further help here. You should specify that it is about mail template in your question too. It makes a big difference of what is avalaible for styling. maybe some tips here https://stackoverflow.com/questions/24052758/is-accordion-possible-on-responsive-html-email — G-Cyrillus, Sep 13 '22 at 19:13
CSS transform with rotate is only expected to work on Apple Mail and Outlook for Mac: https://www.caniemail.com/features/css-transform/. What email client were you testing on? — Nathan, Sep 13 '22 at 22:57
@G-Cyrillus and Nathan , thanks for the inputs. Can you think of any way to achieve the accordion feature i.e. collapse/expand table rows from https://jsfiddle.net/g8nmu09d/1/ without using the pseudo elements ? I cannot use javascript. — jane, Sep 14 '22 at 11:34
You may eventually try :focus & tabindex https://jsfiddle.net/rw0hvkzc/ — G-Cyrillus, Sep 14 '22 at 13:39
@G-Cyrillus, I am using outlook. but, outlook windows mail and iOS app doesnt support ":focus" , support details: https://www.caniemail.com/clients/outlook/ , https://www.caniemail.com/search/?s=focus , it didnt work however, thank you very much for all the differnent inputs. Forever grateful. I will continue to persevere and somehow make it work. Have a good day ahead. — jane, Sep 14 '22 at 14:31
@G-Cyrillus, can there be a way to bring the checkbox next to "click Me" section in this fiddle : https://jsfiddle.net/2xw3tsrh/2/ - i tried using various ways to traverse to the hidden data after putting the checkbox inside the 'td' - but nothing seems to work. considering your expertise, may be you will have some hints for me. Thank you. — jane, Sep 21 '22 at 15:47
from your fiddle, you may give a try to absolute position to send the input to the left and to the top from its original cell position. keep a padding on the label to avoid it overlapping text https://jsfiddle.net/n97rm1cy/ that is an average trick . I used margin-inline-start/padding-inline-end to follow the direction of the text. padding-right and margin-left is fine to use for english language — G-Cyrillus, Sep 21 '22 at 19:15

score 0 · Answer 1 · answered Jan 17 '23 at 05:06

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...

Input type checked in checkbox to transform using CSS

1 Answers1