Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] nie działa css dla parenta
shpaque
post
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----

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

[HTML] pobierz, plaintext 
  1. <style>
  2. .search-home
  3. {
  4. 	position: relative;
  5. 	min-width: 300px;
  6. 	max-width: 92%;
  7. 	height: 60px;
  8. 	padding: 12px;
  9. 	margin: 13px 0 20px 0;
  10. 	border: solid 3px rgba(0, 0, 0, 0.15);
  11. 	border-radius: 50px;
  12. 	background: rgba(255, 255, 255, 0.25);
  13. 	color: black;
  14. 	overflow: hidden;
  15. }
  16.  
  17. .inputSearchHome
  18. {
  19. 	display: inline-block;
  20. 	float: left;
  21. 	width: 85%;
  22. 	padding: 5px 0 0 10px;
  23. 	font-family: "Open Sans";
  24. 	font-size: 15px;
  25. 	text-align: left;
  26. 	border: none;
  27. 	outline: none;
  28. 	background: transparent;
  29. 	color: #464646;
  30. }
  31.  
  32. .inputSearchHome:focus .search-home
  33. {
  34. 	background: rgba(255, 255, 255, 0.5);
  35. 	border: solid 3px red;
  36. }
  37.  
  38. .submitSearchHome
  39. {
  40. 	display: inline-block;
  41. 	float: right;
  42. 	margin: 0 10px 0 0;
  43. 	width: 10%;
  44. 	text-align: right;
  45. 	background: transparent;
  46. 	border: none;
  47. 	outline: none;
  48. 	color: rgba(255, 255, 255, 0.5);
  49. }
  50. </style>
  51.  
  52. <form action="./search.php" method="get" class="search-home" name="widget-search-home">
  53. 	<input type="text" class="inputSearchHome" name="s" placeholder="Wyszukaj szkolenie" />
  54. 	<button type="submit" class="submitSearchHome"><span class="fa fa-search icon-md"></span></button>
  55. </form>
[HTML] pobierz, plaintext


Ten post edytował shpaque 29.06.2018, 13:27:15
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Neutral
post
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;
}


[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <input type="checkbox" id="box"/>
  4.  
  5. <form class="form1">
  6.  
  7. 	<label for="box">click</label>
  8. 	<input type="text"/>
  9.  
  10. </form>
  11.  
  12. </body>
[HTML] pobierz, plaintext


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;
}


[HTML] pobierz, plaintext 
  1. <form class="form1">
  2. 	<input type="text"/>
  3. </form>
[HTML] pobierz, plaintext

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
Go to the top of the page
+Quote Post

Posty w temacie
- shpaque   [CSS] nie działa css dla parenta   28.06.2018, 19:00:39
- - Neutral   To jest chyba niemożliwe z punktu CSS i HTML, musi...   29.06.2018, 14:48:04
- - trueblue   CSS to kaskadowe arkusze stylów - selektorami ...   29.06.2018, 14:54:09
- - shpaque   Zrobiłem szybki jsfiddle - jak dam ".parent:h...   29.06.2018, 14:58:37
- - trueblue   Chyba nie rozumiesz jak działa CSS i co zrobiłeś. ...   29.06.2018, 15:03:25
- - shpaque   czyli dac tak jak pisales dla inputa klase z formu...   29.06.2018, 15:06:08
- - trueblue   Poprzez input:before uzyskasz button? Jeśli Ci się...   29.06.2018, 15:08:20
- - shpaque   button to lupa (klasa fa-search), form/input jest ...   29.06.2018, 15:16:58
- - trueblue   Neutral, Ty błyskawico...   29.06.2018, 21:10:07

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 13.10.2025 - 06:01
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn