![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 651 Pomógł: 3 Dołączył: 31.01.2011 Skąd: Warszawa Ostrzeżenie: (10%) ![]() ![]() |
Witam, od razu dodam ze konsola nic nie zwraca- zawsze dzialalo - tutaj nie. Chodzi o to ze po nacisnieciu inputa (:focus) nie zmienia mi ustawien css formularza
Ten post edytował shpaque 29.06.2018, 13:27:15 |
|
|
![]() |
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 286 Pomógł: 46 Dołączył: 10.01.2016 Ostrzeżenie: (0%) ![]() ![]() |
To jest chyba niemożliwe z punktu CSS i HTML, musiałbyś do tego dołączyć jeszcze np. JS, żeby móc to wykonać.
W ogóle, to w zapisie masz chyba błąd w składni, składnia border jest taka: Cytat border: medium dashed green; https://developer.mozilla.org/en-US/docs/Web/CSS/border Najpierw trzeba podać wysokość/grubość linii, następnie styl i na końcu kolor. Pseudo-selektory i selektory o ile mi wiadomo mogą odwoływać się tylko i wyłącznie do następników, a nie poprzedników. Nawet na chat'cie IRC na kanale (FREENODE) #html się o tym upewniłem. Jak sama nazwa wskazuje są to kaskadowe arkusze stylów, działają jak kaskada. Wyobraź sobie wodę, która spływa z takich zrębów/kaskad. Woda płynie tam gdzie jest najniżej i chyba tak właśnie działa CSS, może odwoływać się tylko w dół kodu, nie w górę, to nie język programowania. Jedynym trick'iem jaki mógłbyś wykonać to moim zdaniem połączenie input[type="checkbox"] z label. Ale wtedy musiałbyś chyba tylko klikać na tekst, który byłby w label, a nie w input[type="text"] nadając mu focus. Żeby problem rozwiązać to chyba trzeba by było zastosować pozycję absolutną i/lub relatywną, czy coś w tym stylu. Dodatkowo można by użyć pseudoklas jakimi są ::after i ::before, choć tego do końca pewien nie jestem. Reasumując, aby to wykonać potrzebne jest Tobie nadanie focus'a dla label i dla input[type="text"], ponieważ wtedy zaznaczy Ci się input[type="checkbox"]. Gdy checkbox zostanie zaznaczony, to wykona się akcja, czyli np. zostaną uaktywnione napisane przez Ciebie style. Ale tak jak pisałem wcześniej, nie wiem, czy to możliwe z poziomu CSS'a i HTML'a, więc za dużo powiedzieć nie mogę. Kod body { background:grey; } form { border:1px solid grey; padding:30px; } input#box { display:none; } input#box:checked + form.form1 { border:1px solid green; background:orange; } Można to napisać bez tych trick'ów, o ile z tymi trick'ami w ogóle się da, to możesz użyć pseudo-selector'a :focus-within. Kod .form1 { border:5px solid grey; padding:30px; } .form1:focus-within{ background:green; border:5px solid black; } https://css-tricks.com/almanac/selectors/f/focus-within/ Link1, link2, link3, link4, link5, link6. Ten post edytował Neutral 29.06.2018, 15:59:20 |
|
|
![]() ![]() |
![]() |
Aktualny czas: 11.10.2025 - 12:33 |