SCSS $cd-txt2: #6300a0; $cd-box: white; $cd-txt--invalid: #fff; $cd-danger: #b20a37; .form { &__group { & input { border: 2px solid $cd-box; border-radius: 100rem; color: $cd-txt2; font-size: 1.5rem; outline: none; padding: .5rem 1.5rem; width: 100%; transition: background-color 400ms; &:focus { border: 2px solid $cd-txt2; } &:not(:focus):invalid { background-color: $cd-danger; border: 2px solid $cd-danger; color: $cd-txt--invalid; } } } }
Les pseudoclasses les plus adaptées pour déclencher des transitions sont celles qui impliquent une interaction avec l’utilisateur.
Les pseudoclasses les plus courantes pour déclencher une transition sont :hover, :active, :focus, :valid, :invalid, :not(), :checked, :enabled, et :disabled