Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] nie działa css dla parenta
shpaque
post 28.06.2018, 19:00:39
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
Neutral
post 29.06.2018, 14:48:04
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
trueblue
post 29.06.2018, 14:54:09
Post #3





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

CSS to kaskadowe arkusze stylów - selektorami "podróżujesz" w dół od elementu.

[HTML] pobierz, plaintext 
  1. .search-home:focus-within
  2. {
  3. 	background: rgba(255, 255, 255, 0.5);
  4. 	border: solid 3px red;
  5. }
[HTML] pobierz, plaintext


Albo po prostu tą wielką ramkę dodaj do input, a nie całego formularza.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
shpaque
post 29.06.2018, 14:58:37
Post #4





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

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

Zrobiłem szybki jsfiddle - jak dam ".parent:hover .child:hover" to zmienia background i to parenta chyba bo na calej szerokosci..?

https://jsfiddle.net/gmaLf4k7/3/
Go to the top of the page
+Quote Post
trueblue
post 29.06.2018, 15:03:25
Post #5





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Chyba nie rozumiesz jak działa CSS i co zrobiłeś.

Na :hover .parent stylujesz .child (to, że jest tam .child:hover ma już niewielkie znaczenie, bo czy tam będzie czy nie, to tak samo to zadziała).


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
shpaque
post 29.06.2018, 15:06:08
Post #6





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

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

czyli dac tak jak pisales dla inputa klase z formularza -a co z buttonem zeby byl w inpucie z prawej strony? input:before?
Go to the top of the page
+Quote Post
trueblue
post 29.06.2018, 15:08:20
Post #7





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Poprzez input:before uzyskasz button? Jeśli Ci się uda, to tak zrób...

Podałem Ci jedno rozwiązanie bez dużej ingerencji w CSS.
Drugie rozwiązanie wymaga tego, aby input i/lub button pozycjonować absolutnie. Chyba, że button docelowo jednak będzie poza tą wielką ramką.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
shpaque
post 29.06.2018, 15:16:58
Post #8





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

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

button to lupa (klasa fa-search), form/input jest zaokraglony na rogach, a lupa chcialem zeby byla z prawej strony w polu. dlatego ta pseudoklasa w formularzu ktory spina button i input razem - wyglada to tak jak powinno, jednak taki kaprys mialem zeby zmianil sie background forma po focusie inputa

podejrzec to mozna tutaj: http://www.edu-online.edu.pl/index.php

Ten post edytował shpaque 29.06.2018, 15:17:56
Go to the top of the page
+Quote Post
trueblue
post 29.06.2018, 21:10:07
Post #9





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Neutral, Ty błyskawico...smile.gif


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 18.04.2024 - 14:41
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn