CSS formuláře
Vzhled formuláře HTML lze výrazně zlepšit pomocí CSS:
Styly vstupních polí
Pomocí width
vlastnosti určete šířku vstupního pole:
Příklad
input
{
width: 100%;
}
Výše uvedený příklad platí pro všechny prvky <input>. Pokud chcete stylizovat pouze konkrétní typ vstupu, můžete použít selektory atributů:
input[type=text]
- vybere pouze textová poleinput[type=password]
- vybere pouze pole heslainput[type=number]
- vybere pouze číselná pole- atd..
Polstrované vstupy
Pomocí padding
vlastnosti přidejte mezeru do textového pole.
Tip: Pokud máte mnoho vstupů po sobě, možná budete chtít přidat nějaké margin
, abyste přidali více místa mimo ně:
Příklad
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Všimněte si, že jsme nastavili box-sizing
vlastnost na
border-box
. Tím je zajištěno, že odsazení a případně okraje budou zahrnuty do celkové šířky a výšky prvků.
Přečtěte si více o této box-sizing
vlastnosti v naší kapitole Velikost CSS boxu .
Ohraničené vstupy
Pomocí border
vlastnosti změňte velikost a barvu ohraničení a pomocí border-radius
vlastnosti přidejte zaoblené rohy:
Příklad
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Pokud chcete pouze spodní ohraničení, použijte border-bottom
vlastnost:
Příklad
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Barevné vstupy
Pomocí této background-color
vlastnosti můžete ke vstupu přidat barvu pozadí a pomocí color
vlastnosti můžete změnit barvu textu:
Příklad
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Zaměřené vstupy
Ve výchozím nastavení některé prohlížeče přidají modrý obrys kolem vstupu, když je aktivní (kliknutím na něj). Toto chování můžete odstranit přidáním outline: none;
do vstupu.
Pomocí :focus
selektoru proveďte něco se vstupním polem, když bude aktivní:
Příklad
input[type=text]:focus
{
background-color: lightblue;
}
Příklad
input[type=text]:focus
{
border: 3px solid #555;
}
Vstup s ikonou/obrázkem
Pokud chcete mít ikonu uvnitř vstupu, použijte background-image
vlastnost a umístěte ji s background-position
vlastností. Všimněte si také, že jsme přidali velké levé odsazení, aby bylo vyhrazeno místo pro ikonu:
Příklad
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Animovaný vstup pro vyhledávání
V tomto příkladu používáme transition
vlastnost CSS k animaci šířky vyhledávacího vstupu, když je aktivní. Více o
transition
vlastnosti se dozvíte později, v naší kapitole Přechody CSS .
Příklad
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Styling textových oblastí
Tip: Pomocí této resize
vlastnosti zabráníte změně velikosti textových oblastí (v pravém dolním rohu deaktivujte „drapák“):
Příklad
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Styling Vyberte nabídky
Příklad
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Styling vstupních tlačítek
Příklad
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Další informace o tom, jak stylovat tlačítka pomocí CSS, najdete v našem výukovém programu pro tlačítka CSS .
Responzivní formulář
Změňte velikost okna prohlížeče, abyste viděli efekt. Když je obrazovka široká méně než 600 pixelů, naskládejte dva sloupce na sebe, nikoli vedle sebe.
Rozšířené: Následující příklad používá dotazy na média k vytvoření responzivního formuláře. Více se o tom dozvíte v další kapitole.