Mam problem z css

pytanie zadane 10 sierpnia 2020 w HTML i CSS przez Marak123 Stary wyjadacz (11,190 p.)
zamknięte 10 sierpnia 2020 przez Marak123

Mam problem z animacją css bo chcę zrobić tak że po kliknięciu na input znacznik label zmieni kolor tekstu i przesunie tekst droczę wyżej tylko że nie działa mi to fokusowanie taka jest składnia powie mi ktoś dlaczego to nie działa?

.signin-signup .signin input[name="email-signin"]:focus label[for="email-signin"]

Dodam jeszcze ze bez tego znacznika label dodanego do tej linijki animacja działa na input a jak dodałem klase do tego label i wpisałem tak klasę zamiast tego label też nie działa nie wiem dlaczego.

komentarz zamknięcia: dzięki za odpowiedź

komentarz 10 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Możesz pokazać jeszcze kod HTML?

komentarz 10 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

<section class="login">
            <p>ZALOGUJ</p>
            <div class="signin-signup">
                  <section class="nav-sign">
                        <span></span>
                        <p>Zaloguj</p>
                        <p>Zarejestruj</p>
                  </section>
                  <form class="signin" action="">
                        <label for="email-signin" class="cos">E-mail</label>
                        <input name="email-signin" id="email-signin" type="email" placeholder="&#xe802;">
                        <label for="password-signin">Hasło</label>
                        <input name="password-signin" id="password-signin" type="password">
                        <input name="submit-signin" type="submit" value="ZALOGUJ">
                        <span></span>
                        <a href="#"></a>
                  </form>
            </div>
      </section>

mozliwe ze źle używam znaczników semantycznych ale tam

a to css pełny do elementu input i label

.login .signin-signup .signin input{
    display: block;
    width: 60vw;
}

.login .signin-signup .signin input[name="email-signin"]{
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #FFFFFF;
    font-family: 'fontello';
    margin-bottom: 20%;
    outline: none;
}
.login .signin-signup .signin input[name="email-signin"]::placeholder{
   float: right;
}
.login .signin-signup .signin label[for="email-signin"]{
    color: #FFFFFF;
    position: absolute;
    transition: color 0.5s cubic-bezier(0, 0, 0, 0);
    -webkit-transition: color 0.5s cubic-bezier(0, 0, 0, 0);
    -moz-transition: color 0.5s cubic-bezier(0, 0, 0, 0);
    -ms-transition: color 0.5s cubic-bezier(0, 0, 0, 0);
    -o-transition: color 0.5s cubic-bezier(0, 0, 0, 0);
}
.signin-signup .signin input[name="email-signin"]:focus label[for="email-signin"],
.signin-signup .signin input[name="email-signin"]:valid label[for="email-signin"]{
    transform: translateY(-4vw);
    -webkit-transform: translateY(-4vw);
    -moz-transform: translateY(-4vw);
    -ms-transform: translateY(-4vw);
    -o-transform: translateY(-4vw);
    color: #28A0F5;
}

3 odpowiedzi

odpowiedź 10 sierpnia 2020 przez VBService Ekspert (253,420 p.)
edycja 10 sierpnia 2020 przez VBService

CSS Input Label Animation | HTML Form Placeholder Above Inputs

Podgląd

[ Edit ]

Move Placeholder To Top on Focus And While Typing - Pure CSS Tutorial - No Javascript

komentarz 10 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

ok dzięki podałeś jak stworzyć to za pomocą js ale ja chcę za pomocą css i wiem ze coś takiego jak jest w temacie zadziała bo widziałem to u jakiegoś typa na filmie jak robił coś takiego

odpowiedź 10 sierpnia 2020 przez DawidK Nałogowiec (37,910 p.)

Prawdopodobnie nie łapie Ci elementu. Może mnie ktoś poprawi, ale w CSS nie ma chyba, czegoś takiego jak "poprzedni element"

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        input:focus ~ label:first-of-type{
            background-color:red;
        }
    </style>
</head>
<body>
    <form>
        <input>
        <label>Name</label>
        <input>
    </form>
</body>
</html>

Powyższy kod czyli focus na input zadziała tylko w przypadku gdy label jest po inpucie. Mimo znacznika:

~ label:first-of-type

pierwszy element "brat" typu label.

komentarz 10 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

jak dałem pod spód ten label to zadziałało dzięki nie wiedziałem ze się nie da tak nawet

odpowiedź 10 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Selektor

.signin-signup .signin input[name="email-signin"]:focus label[for="email-signin"]

szuka elementu <label for="email-signin"> wewnątrz <input name="email-signin">, który ma stan focus.

Natomiast w HTML-u

<label for="email-signin" class="cos">E-mail</label>
<input name="email-signin" id="email-signin" type="email" placeholder="&#xe802;">

element label nie jest wewnątrz input, a przed nim. W związku z tym, zastosowany selektor CSS nie zadziała - nie widzę też, aby w CSS był selektor poprzedniego elementu. Mógłbyś posłużyć się selektorem "przyległego rodzeństwa", ale do tego wypadałoby zamienić kolejnością input z label. W innym wypadku, bez użycia JS-a raczej się nie obędzie.

Jeśli chcesz coś zrobić na kliknięcie, to obsłuż to w JS-ie (np. dynamicznie dodając odpowiednią klasę do elementu na czas kliknięcia).

komentarz 10 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

no właśnie zamieniłem miejscami input z label i działa focus ale jest tak tez dodany pseudoklasa :valid i gdy w tym inpucie niczego nie ma to animacja się wykonuje a gdy w tym inpucie jest tekst to nie ma tej transformacji i nie wiem czemu działa mi to na odwrót niż chcę

.signin-signup .signin input[name="email-signin"]:valid ~ label[for="email-signin"]

wiesz może dlaczego puste pole animacja działa a jak jest pełne to nie działa i jak to naprawić żeby było n odwrót??

komentarz 10 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
edycja 10 sierpnia 2020 przez ScriptyChris

Jeśli tekst, który wpisujesz w input[type="email"] nie spełnia formatów wartości to selektor nie złapie tego inputa - pusta wartość (niewypełniony input) przechodzi walidację (w specyfikacji są dostępne reguły walidacji dla inputa emailowego). Jeśli chcesz ostylować input nieprawidłowy w kontekście walidacji, to posłuż się selektorem :invalid. Jeśli chcesz ostylować niewypełniony/pusty input, to użyj selektora input[value=""] lub (jeśli input nie ma atrybutu value bezpośrednio ustawionego w kodzie) użyj input:not(value).