CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS formuláře


Vzhled formuláře HTML lze výrazně zlepšit pomocí CSS:


Styly vstupních polí

Pomocí widthvlastnosti 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á pole
  • input[type=password] - vybere pouze pole hesla
  • input[type=number] - vybere pouze číselná pole
  • atd..


Polstrované vstupy

Pomocí paddingvlastnosti 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-sizingvlastnost 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-sizingvlastnosti v naší kapitole Velikost CSS boxu .


Ohraničené vstupy

Pomocí bordervlastnosti změňte velikost a barvu ohraničení a pomocí border-radiusvlastnosti 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-bottomvlastnost:

Příklad

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Barevné vstupy

Pomocí této background-colorvlastnosti můžete ke vstupu přidat barvu pozadí a pomocí colorvlastnosti 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í :focusselektoru 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-imagevlastnost a umístěte ji s background-positionvlastností. 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 transitionvlastnost CSS k animaci šířky vyhledávacího vstupu, když je aktivní. Více o transitionvlastnosti 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 resizevlastnosti 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.