DIY #11 Material Design input | DailyWeb.pl

DIY #11 Material Design input

Opublikowano 1 rok temu - 7


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>:


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

<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>:

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

<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:

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

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.

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

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:

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

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.