• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Mam problem z css

VPS Starter Arubacloud
+1 głos
197 wizyt
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

0 głosów
odpowiedź 10 sierpnia 2020 przez VBService Ekspert (255,440 p.)
edycja 10 sierpnia 2020 przez VBService
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
0 głosów
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
0 głosów
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).

komentarz 10 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)
a dzięki użyłem invalid i działa

Podobne pytania

+1 głos
2 odpowiedzi 641 wizyt
pytanie zadane 11 lipca 2021 w HTML i CSS przez Kytrap Początkujący (390 p.)
0 głosów
1 odpowiedź 171 wizyt
0 głosów
1 odpowiedź 214 wizyt

92,841 zapytań

141,781 odpowiedzi

320,857 komentarzy

62,173 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...