Forum PHP.pl > [CSS] nie działa css dla parenta

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] nie działa css dla parenta

shpaque

28.06.2018, 19:00:39

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 
<style>
.search-home
{
	position: relative;
	min-width: 300px;
	max-width: 92%;
	height: 60px;
	padding: 12px;
	margin: 13px 0 20px 0;
	border: solid 3px rgba(0, 0, 0, 0.15);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.25);
	color: black;
	overflow: hidden;
}
 
.inputSearchHome
{
	display: inline-block;
	float: left;
	width: 85%;
	padding: 5px 0 0 10px;
	font-family: "Open Sans";
	font-size: 15px;
	text-align: left;
	border: none;
	outline: none;
	background: transparent;
	color: #464646;
}
 
.inputSearchHome:focus .search-home
{
	background: rgba(255, 255, 255, 0.5);
	border: solid 3px red;
}
 
.submitSearchHome
{
	display: inline-block;
	float: right;
	margin: 0 10px 0 0;
	width: 10%;
	text-align: right;
	background: transparent;
	border: none;
	outline: none;
	color: rgba(255, 255, 255, 0.5);
}
</style>
 
<form action="./search.php" method="get" class="search-home" name="widget-search-home">
	<input type="text" class="inputSearchHome" name="s" placeholder="Wyszukaj szkolenie" />
	<button type="submit" class="submitSearchHome"><span class="fa fa-search icon-md"></span></button>
</form>
[HTML] pobierz, plaintext

Neutral

29.06.2018, 14:48:04

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 
<body>
 
<input type="checkbox" id="box"/>
 
<form class="form1">
 
	<label for="box">click</label>
	<input type="text"/>
 
</form>
 
</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 
<form class="form1">
	<input type="text"/>
</form>
[HTML] pobierz, plaintext

https://css-tricks.com/almanac/selectors/f/focus-within/

Link1, link2, link3, link4, link5, link6.

trueblue

29.06.2018, 14:54:09

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

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

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

shpaque

29.06.2018, 14:58:37

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/

trueblue

29.06.2018, 15:03:25

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).

shpaque

29.06.2018, 15:06:08

czyli dac tak jak pisales dla inputa klase z formularza -a co z buttonem zeby byl w inpucie z prawej strony? input:before?

trueblue

29.06.2018, 15:08:20

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ą.

shpaque

29.06.2018, 15:16:58

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

trueblue

29.06.2018, 21:10:07

Neutral, Ty błyskawico...

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.