How to show a div on input focus with CSS?-CodePudding

I'm trying to show a password strength as a user is typing his password. The strength indication divs (.strengthClass and .rules-details) should show up only when the user types his password (ie. when .password-input on focus) I tried the CSS code below to test with .strengthClass but it's not working. How can I overcome this with only CSS ?

HTML:

                            <StrengthStyled className="password-rules">
                                <Flex justifyContent="center" className={`strengthClass strength-${strengthClass.id} value-${strengthClass.value}`} my={10}>
                                    <span>
                                        {
                                            strengthClass.value === 'Weak' ?
                                               'Faible'
                                            : strengthClass.value === 'Too weak' ?
                                                'Très faible'
                                            : strengthClass.value === 'Medium' ?
                                                'Moyen'
                                            : strengthClass.value === 'Strong' ?
                                                'Fort'
                                            : null
                                            
                                        }
                                    </span>
                                </Flex>
                                <Box className="rules-details">
                                    Règles du mot de passe: 
                                    <ul>
                                        <li>Doit contenir au moins 1 majuscule</li>
                                        <li>Doit contenir au moins 1 minuscule</li>
                                        <li>Doit contenir au moins 1 chiffre</li>
                                        <li>Doit contenir au moins 1 caractère spécial</li>
                                        <li>Doit contenir au moins 10 caractères</li>
                                    </ul>
                                </Box>
                            </StrengthStyled>

CSS:

.strengthClass{
        max-width: 200px;
        height: 30px;
        padding: 5px;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid transparent;
        border-radius: 25px;
        background-color: #FF68A7;
        display: none;
        
        span{
            color: white;
            text-align: center;
        }
    }

.rules-details{
    display: none; 
}



.password-input:focus   .strengthClass{
    display: block; 
}

CodePudding user response：

I do not know how the resulting HTML structure is, but to use the adjacent sibling combinator ( ) in CSS, the two elements have to be consecutive one another. Using the general sibling combinator (~) allows you to address items that are after the first element in any position, and share the same parent element.

For example:

.strengthClass,
.rules-details {
  display: none;
}

.password-input:focus   .strengthClass {
  display: block;
}

.password-input:focus ~ .rules-details {
  display: block;
}

<form>
  <input type="password" class="password-input">
  <div class="strengthClass">strengthClass</div>
  <div class="rules-details">rules-details</div>
</form>