To już 11 „odcinek” serii o czarowaniu w CSS. Dziś stworzymy <input> w stylu Material Design. Taki tylko działający wszędzie i przy użyciu samego CSSa :)

Do roboty, potrzebujemy <div>, <label> no i oczywiście <input>:

[css]

<div>
<input type="text" id="dw_login" required>
<label for="dw_login">Twój login</label>
</div>

[/css]

<div> po to abyśmy mogli <label> ustawić sobie względem jakiegoś kontenera. <label> po co nam jest to chyba wszyscy juz wiemy, tak samo jak <input>. Atrybut required abyśmy mięli dostęp do dodatkowego selektora CSS: :valid  :)

Rozkładamy końcowy efekt na czynniki pierwsze:

  • <label> jest „na” <input>
  • po kliku <label> przemieszcza się i pomniejsza  a dodatkowo jego kolor oraz podkreślenie <input> się zmienia
  • po odklinięciu wraca do normy chyba że:
  • jest wpisana zawartość, wtedy wyszarzamy i zostawiamy małe i w górze.

Co więc będziemy potrzebować?

Ostylowany  <input>:

[css]
input{
width: 100%;
height: 20px;
line-height: 20px;
margin-top: 12px;
border: none;
border-bottom: 2px solid #3c3c3c;
background: none;
padding-left: 10px;
}
[/css]

<label> ustawiony absolutnie względem <div> aby nachodził na <input>, musimy pamiętać aby label należał do odpowiedniego <input> ponieważ chcemy aby klikając także w <label> nasz <input> stawał się aktywny:

[css]
label{
font-family: Arial;
color: #3c3c3c;
position: absolute;
top: 50%;
left: 10px;
transform: translate(0px, -50%);
font-size: 14px;
transition: all 0.2s ease;
}
[/css]

Cała zabawa polega na odpowiednim użyciu selektorów :not, :focus, :valid i stylowaniu <label> występującej zaraz po nich (tak samo jak przy własnych checkboxach i radiobuttonach).

Zmniejszamy i przenosimy <label> jak input jest „kliknięty” czyli aktywny oraz ma takie pozostać po wprowadzeniu danych. Używamy :focus i :valid aby wystylować te stany naszego pola.

[css]
input:focus+label , input:valid+label{
top: 0px;
left: 0px;
font-size: 12px;
}
input:focus+label{
color: #3cbabe;
}
input:focus{
border-color: #3cbabe;
outline: none;
}
[/css]

Dodatkowo chcieliśmy aby nasza <label> pozostała mała i zrobiła się szara po tym jak pole straci „focus”.
Puste i nie aktywne = stan normalny – kolor czarny, na środku
Puste i aktywne = :focus – kolor zielony, u góry
Pełne i aktywne = :focus + :valid – kolor zielony, u góry
Pełne i nieaktywne = :valid:not(:focus) – kolor szary, u góry
W ten sposób mamy wystylowany ostatni stan, który nas interesuje:

[css]
input:valid:not(:focus)+label{
color: #d3d3d3;
}
input:valid:not(:focus){
border-color: #d3d3d3;
}
[/css]

Efekt końcowy:

link do jsfiddle

Oczywiście zdaję sobie sprawę że można ten efekt uzyskać jeszcze na conajmniej kilka sposobów i sporo pozmienić, ja pokazuje tylko jeden z nich :)
Masz uwagi? Propozycję? Cokolwiek? Wal śmiało w komentarzach.

 

Jeśli jeszcze nie widziałeś wcześniejszych odcinków DIY zapraszam pod ten właśnie tag.

TEMATY:
Najświeższe artykuły