Krásný vstupní text css. Obrázek jako pozadí, které zmizí, když zadáte text. Testy Rogera Johanssona

Obrázky a pozadí usnadňují změnu vzhledu textových polí a tlačítek pro odeslání formuláře. Jako obvykle je nejprve potřeba požadované prvky nakreslit v grafickém editoru (obr. 1) a poté vyrobit jednotlivé obrázky pro každé pole.

Rýže. 1. Forma s nestandardními prvky

Začněme jednořádkovým textovým polem. Rozměry obrázku se ukázaly být 328x46 pixelů, tyto hodnoty označíme jako šířku a výšku. Samotný obrázek nastavíme jako pozadí pomocí vlastnosti background. Zpočátku textové pole zobrazuje rámeček, aby nekazilo pohled, musí být skryto nastavením vlastnosti border na none (příklad 1).

Příklad 1: Textové pole

Textové pole .user ( šířka: 308px; /* Šířka pole včetně odsazení */ výška: 46px; /* Výška */ pozadí: #dad7c5 url(images/input.png) no-repeat; /* Pozadí */ odsazení: 0 10px; /* Okraje */ ohraničení: žádné /* Odebrat ohraničení */ font-size: 1em;

Naše výška pole je poměrně velká ve srovnání s výchozím polem, což způsobuje problémy se zarovnáním textu na střed v IE. Objeví se podél horního okraje pole, které vypadá dost nedbale. Pro zarovnání použijte vlastnost line-height s hodnotou rovná výšce pole specifikovaná pomocí výšky . Toto přidání neovlivní ostatní prohlížeče, takže podmíněné komentáře mohou být ignorovány.

U víceřádkového textového pole je nastavení pozadí podobné. Je tu ale drobný rozdíl – s pravá strana tam jsou skvrny, pokud vložíme obrázek jako pozadí pro , tak kdy svislý pruh Posouváním se zobrazí přímo na blotech. V tomto případě se efekt rámu ztratí. Proto přidáme pozadí pro prvek bloku a zobrazíme jej v něm (příklad 2).

Sem také vložíme ručně nakreslené tlačítko pro odeslání souboru. To se provádí přes , v atributu src uvedeme cestu k souboru, o zbytek se postará prohlížeč.

Příklad 2: Pole pro zadání textu

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Textová oblast .comment ( šířka: 347px; /* Šířka obrázku */ výška: 176px; /* Výška obrázku */ pozadí: #dad7c5 url(images/textarea.png) no-repeat; /* Pozadí */ ) .comment textarea ( ohraničení: žádné; /* Odebrat rámeček */ pozadí: průhledné; /* Průhledné pozadí */ okraj: 3px; /* Odsazení od řádku */ šířka: 318px; /* Šířka pole */ odsazení: 5px 0 5px 5px ; / * Okraje textu */ výška: 160px /* Výška */ )

Ve výchozím nastavení má textové pole bílá barva pozadí, které vůbec nepotřebujeme, takže ve vlastnostech nastavíme průhledné pomocí hodnoty transparent.

Prohlížeče vykreslují posuvník mírně odlišně, ale změny nejsou natolik výrazné, aby se vyplatily. Například zobrazení formuláře v Opeře je znázorněno na Obr. 2.

Rýže. 2. Pole pro zadání textu

Příklady se v prohlížečích zobrazují správně, ale je třeba vzít v úvahu dva body.

Safari a Chrome přidávají zvýraznění do aktivních polí, aby indikovali, že je prvek aktivní. Použitím obrázky na pozadí takové osvětlení může „zkazit“ design, takže v některých případech by mělo být opuštěno přidáním stylová nemovitost obrys s hodnotou none do selektorů INPUT a TEXTAREA.

V prohlížeči IE7 je chyba s pozadím. Pokud do textového pole zadáte text, který přesahuje šířku pole, pozadí se začne posouvat. Délku textu můžete omezit pomocí atributu maxlength tagu, nebo můžete pozadí nastavit na border tag spíše než na , jak je ukázáno v příkladu 2. Tato chyba je opravena v IE8.

Poměrně mnoho kopií front-endových vývojářů již bylo rozbito problémem stylizace vstupního pole. Jádrem problému je, že specifikace HTML nemá přísná pravidla, která by určovala, jak by měl prohlížeč tento prvek zobrazovat. Navíc neexistují žádné atributy pro vstup, které by vám umožnily jej změnit vzhled, pomocí CSS stylů lze měnit pouze vzhled jeho ohraničení a fontu a pomocí JavaScriptu z bezpečnostních důvodů nelze simulovat kliknutí na tento prvek, které by vyvolalo systémové okno pro výběr * . Co ale dělat, když zákazník chce responzivní web s krásnými stylizovanými formuláři, který se bez tohoto vstupního pole neobejde?

* - v době psaní tohoto článku jsem ještě nevěděl, že ve všech moderních prohlížečích simulace kliknutí na vstup vyvolá okno pro výběr systémového souboru. Mnohokrát děkuji lutov za váš cenný komentář s odkazem na fungující příklad z Pagefestu!

Způsoby řešení problému se stylizací polí Protože tento problém existuje (a existuje již velmi dlouho), bylo nalezeno několik způsobů, jak jej vyřešit. Je jich celkem pět: Metoda č. 1 (nejběžnější) Přesvědčte zákazníka, že můžete žít se standardním vstupem Metoda č. 2 Napište/použijte hotový zavaděč souborů na Flash/Java applet. Používá se například na habrastorage.org Metoda č. 3 (bude probrána v článku) Pomocí CSS „zamaskujte“ standardní vstup, zprůhledněte jej a umístěte jej na místo stylizovaného falešného pole, takže kliknutí na druhém způsobí kliknutí na standardní a v důsledku toho otevře okno pro výběr systémového souboru Metoda č. 4 nová! (bude pojednáno v článku) Umístěte průhledný vstup dovnitř prvku štítku spolu s libovolnými stylizovanými vkládanými prvky (samozřejmě kromě vstupu, tlačítka, výběru a textové oblasti). Kliknutí na štítek automaticky povede ke kliknutí na skryté pole pro výběr souboru. Děkuji lampa za váš cenný komentář Metoda č. 5 nová! (bude probráno v článku) Využijte simulaci kliknutí na skrytý vstup pomocí JavaScriptu. Ano, toto již funguje ve všech moderních prohlížečích. Ještě jednou děkuji lutov za váš cenný komentář!
UPD: Pozor, tato metoda není použitelná pro prohlížeč internet Explorer! I když je soubor vybrán ve skrytém vstupu, při odeslání formuláře bude jeho hodnota "resetována". Děkuji LeonidFrolov za váš cenný komentář!

Všechny čtyři poslední metody mají samozřejmě své nevýhody. Značná nevýhoda Problém s řešeními Flash/Java spočívá v tom, že jejich provoz vyžaduje vhodné pluginy, které nemusí být dostupné v prohlížeči uživatele. Velká nevýhodaŘešení „maskování“ spočívá v tom, že k jeho implementaci je nutné použít hacky (o tom bude řeč níže) a také proto, že bez pomocí JavaScriptu(koneckonců u stylizovaného falešného pole musíte nějak rozlišovat mezi stavy „soubor nevybrán“ a „soubor vybrán“, což se samotným CSS nedá). Řešení v JavaScriptu by obecně bylo velmi dobré, ale jak se v praxi ukázalo, není podporováno internetový prohlížeč Explorer, jak je uvedeno výše. Nevýhodou řešení pomocí labelu je stejné použití JavaScriptu, je však mnohem lepší než metoda „maskování“ a podle mého názoru by se nyní mělo použít k řešení tohoto akutního problému.

Schéma jízdního kola Klíčovým úkolem bylo vytvořit „gumový“ vstup, který na obrazovkách mobilní zařízení by bylo jednoduché tlačítko pro výběr souboru (je na něm zobrazen název vybraného souboru) a dále širokoúhlé obrazovky by vypadalo jako známé textové pole + tlačítko, které se může roztáhnout přes celou šířku okna:

Schematický pohled na prvek na mobilních zařízeních

Schematický pohled na prvek na stolních zařízeních

Tento článek se bude zabývat třemi nejnovější metody stylování pole pro výběr souboru. S přihlédnutím k výše uvedenému schématu tedy bude mít počáteční rozložení pro metodu „kamufláže“ č. 3 další pohled(pořadí dětí je důležité!):

Vyberte Soubor není vybrán

Možné rozložení metody pomocí prvku label:
Vyberte Soubor není vybrán

Možné rozvržení řešení v JavaScriptu (stejné jako rozvržení pro metodu „camouflage“):
Vyberte Soubor není vybrán

"Táhni, Prasátko!" nebo styly pro metodu „camouflage“ Aby čtenář neměl mylný dojem, že každá hodnota vlastnosti CSS použitá v článku je velmi důležitá (tzv. „magická čísla“), dohodneme se na označení těch, která mohou být bezpečně změněno podle vašich potřeb s komentářem

/* příklad */

Souhlas? Skvělý! Začněme stylizovat pole výběru falešného souboru s jeho „obalem“ - div.file_upload :

File_upload( pozice: relativní; přetečení: skryté; velikost písma: 1 em; /* příklad */ výška: 2 em; /* příklad */ výška řádku: 2 em /* totéž jako výška */ )
- vlastnost pozice je nastaven tak, aby jeho podřízené prvky mohly být absolutně umístěny vzhledem k div.file_upload a přepadová vlastnost- abychom schovali vše, co se nám z nějakého důvodu nevejde do obalu (a takové věci budou, ale o tom později). Na širokoúhlých obrazovkách by se naše krásné pole a tlačítko měly zobrazovat v jednom řádku - nastavme to na druhé pevná šířka a plovák: vpravo a pro první - malá výplň:

File_upload > button( float: right; width: 8em; /* příklad */ height: 100% ) .file_upload > div( padding-left: 1em /* example */ )
Protože chceme, aby bylo textové pole na mobilních zařízeních skryté a zůstalo pouze tlačítko pro výběr souboru, musíme nastavit dotaz na média:
@media only screen and (max-width: 500px)( /* příklad */ .file_upload > div( display: none ) .file_upload > button( width: 100% ) )
No a teď ta zábavná část tato metoda! Standardní vstup je nutné zcela zprůhlednit a rozšířit na velikost „wrapperu“ div.file_upload . K implementaci posledně jmenovaného použijeme hack ve formuláři absolutní umístění a transformační vlastnosti CSS 3, kterými prvek zvětšíme např. 20x (ano, to je nejčastější „ magické číslo»):
.file_upload input( pozice: absolutní; vlevo: 0; nahoře: 0; šířka: 100 %; výška: 100 %; transformace: scale(20); mezera mezi písmeny: 10em; /* IE 9 opravit */ -ms-transform : scale(20) /* IE 9 fix */ opacity: 0;
Jak můžete vidět z úryvku CSS výše, IE 9 vyžadoval další vylepšení. To je způsobeno tím, že tento prohlížeč při kliknutí na textové pole nevyvolá okno pro výběr systémového souboru, ale laskavě nabídne „vymazání“ názvu již vybraného, ​​což je symbolizováno blikajícím textovým kurzorem. Proto je mu navíc poskytnuta obrovská mezera mezi písmeny, která zvětšuje tlačítko prvku na velikost div.file_upload . Také jsem zaznamenal, že z-index v v tomto případě není uvedeno, protože prvek je poslední „dítě“ v označení zvoleném od samého začátku.

Použití příkladu na ploše Prohlížeč FireFox, nyní naše přizpůsobené pole pro výběr souboru pro různé velikosti okno vypadá takto:

"Všechno důmyslné je jednoduché!" nebo styly pro metodu popisků Základní styly, na které se aplikují textové pole a tlačítko, pro tuto metodu jsou podobné těm, které již byly popsány výše:

File_upload( display: block; position: relativní; overflow: hidden; font-size: 1em; /* příklad */ height: 2em; /* example */ line-height: 2em /* to same as height */ ) .file_upload .button, .file_upload > mark( display: block; kurzor: pointer /* příklad */ ) .file_upload .button( float: right; box-sizing: border-box; -moz-box-sizing: border-box; width : 8em /* příklad */ výška: 100 % text-align: center /* příklad */ ) .file_upload > mark( background: transparent; /* example */ padding-left: 1em /* example */ )
Nyní však není nutné používat hack k „roztažení“ transparentního vstupu:

File_upload input( pozice: absolutní; nahoře: 0; neprůhlednost: 0 )

"Jak to funguje?" nebo styly pro řešení v JavaScriptu Od původního rozložení pro tato metoda byla zvolena stejně jako v případě „maskování“, styly tlačítka a textového pole pro obě metody jsou také stejné (snad kromě vlastnosti kurzor: pointer, která se v tomto případě použije na tlačítko a textové pole). Vstupní styl může být stejný jako ten, který se používá v metodě pomocí prvku label, ale je lepší použít viditelnost místo vlastnosti opacity:

File_upload input( pozice: absolutní; nahoře: 0; viditelnost: skryté )

Potřebujete více stylů! Samozřejmě, že v tak primitivní podobě pole pro výběr souboru pravděpodobně nebude někomu vyhovovat, takže přidáme další styly, díky nimž bude tlačítko pro výběr souboru, řekněme, fialové, přidáme stíny atd. Nezapomeňme také přidat vlastní styl pro tlačítko, když na něj najedeme kurzorem, styl pro stisknuté tlačítko a také přidáme styl pro celý prvek, když bude mít fokus (toto bude aplikováno pomocí JavaScriptu ):

/* Make it beautiful */ .file_upload( border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,0.1); transition: box-shadow 0.1s linear ) .file_upload.focus( box-shadow: 0 0 5px rgba(0,30,255,0,4) ) .file_upload > button( pozadí: #7300df; přechod: pozadí 0,2s; okraj: 1px plné rgba(0,0,0,0,1 border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25 rámeček-stín: 0 1px 0; rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05 barva: #fff text-shadow: #6200bd 0 -1px 0; overflow: ellipsis ) .file_upload:hover > button( background: #6200bd; text-shadow: #5d00b3 0 -1px 0 ) .file_upload:active > button( background: #5d00b3; box-shadow: 0 0 3px rgba(0, 0,0,0,3) vložka)

Nyní naše pole pro výběr souboru vypadá takto:

Potřebujete více berlí! Protože děláme plnohodnotné pole pro výběr souboru, musíme se ujistit, že se dá pohodlně vyplnit z klávesnice (u metody „maskování“ se nyní nejprve nastaví fokus na stylizované tlačítko a poté ke skrytému vstupu , který se nijak vizuálně neprojevuje ). K tomu samozřejmě používáme JavaScript. Abych se vyhnul psaní velkého množství kódu, dovolím si použít oblíbená knihovna jQuery. Pak pro metodu „kamufláže“:

Var wrapper = $(".file_upload"), inp = wrapper.find("vstup"), btn = wrapper.find("tlačítko"), lbl = wrapper.find("div"); btn.focus(funkce())( inp.focus() )); // Berličky pro styl:focus: inp.focus(function())( wrapper.addClass("focus"); )).blur(function())( wrapper.removeClass("focus"); ));
U metody používající štítek můžete odstranit část kódu, za kterou je odpovědná nucený převod fokus z tlačítka na vstup (protože tam vůbec nemáme tlačítko, ale rozpětí).

Pro metodu, jejíž podstatou je simulovat kliknutí na vstup , musíte ve skutečnosti přidat tuto imitaci:

// Ano, funguje to! btn.add(lbl).click(funkce())( inp.click(); )); a také upravit kód pro nastavení třídy .focus, když předtím odstranil fragment zodpovědný za vynucení fokusu:
// Berličky pro styl:focus: btn.focus(function())( wrapper.addClass("focus"); )).blur(function())( wrapper.removeClass("focus"); ));

Vstupní pole stále zůstalo „mrtvé“ - při výběru souboru se název souboru nikde nezobrazoval. Je čas napravit i toto:

Var file_api = (window.File && window.FileReader && window.FileList && window.Blob) ? pravda: nepravda; inp.change(function())( var file_name; if(file_api && inp[ 0 ].files[ 0 ]) file_name = inp[ 0 ].files[ 0 ].name; else file_name = inp.val().replace ( "C:\\fakepath\\", "" if(! název_souboru.délka) return; if(lbl.is(":visible"))( lbl.text(název_souboru); btn.text("Vybrat); "); )else btn.text(název_souboru);
- pokud prohlížeč podporuje File API, pak je název souboru určen pomocí něj, jinak je z hodnoty vyříznut skrytý vstup. U mobilních zařízení, když je prvkem jediné tlačítko, zobrazí se na něm název vybraného souboru.

Zdá se, že vše, co je požadováno, již bylo napsáno. A tady jsou figurky! Pokud vyberete soubor pomocí pole „mobilní“ a poté zvětšíte velikost okna a přenesete prvek na „desktop“, pak v textovém poli zůstane „Soubor nevybrán“ - musíte prvek aktualizovat při každé změně velikost okna:
$(window).resize(function())( $(".file_upload input").triggerHandler("change"); ));

A co jsme nakonec dostali? Výsledné stylizované pole pro výběr souboru bylo úspěšně testováno pro všechny tři metody v následujících prohlížečích:

• FireFox 22.0 (Linux, Windows)
• Opera 12.16 (Linux, Windows)
• Internet Explorer 9
• Chromium 27.0 (Linux)
• Apple Safari (iOS 6.3.1)
• Prohlížeč Android (Android 2.3.6)
• Android FireFox

Z výhod všech přístupů diskutovaných v článku lze identifikovat následující hlavní:

• Flash se nepoužívá.
• Prvek lze snadno stylizovat pomocí CSS pomocí moderní technologie adaptivní design.
• Pole lze také vyplnit pomocí klávesnice.

Z hlavních nevýhod:

• Nutnost používat JavaScript (platí pro všechny metody).
• Používání CSS hacků k „zamaskování“ věcí.
• Nutnost napsat další berličky pro pole s atributem multiple (platí pro všechny metody).
• Non-cross-browser – všechny metody postrádají podporu pro IE 8 a také musíte použít vlastnosti CSS „prohlížeče“, abyste podpořili zbytek „oldies“.
• Řešení JavaScript není podporováno všemi verzemi Internet Exploreru a některými staršími verzemi jiných. populární prohlížeče(i když už je skoro nikdo nepoužívá).

Pro který ze tří elegantních způsobů vytvoření stylizovaného vstupu byste se měli rozhodnout každodenní použití- rozhodnete se. Moje volba je metoda pomocí štítku (i když má nesémantické rozložení).

Funkční příklady všech tří metod lze nalézt na CodePen.

Nedávno jsem narazil na zajímavý úkol: Potřeboval jsem umístit uživatelský formulář na stránku, která měla několik polí pro zadávání dat a pole pro výběr souboru. Kromě toho je tlačítko pro výběr souboru vyrobeno přesně jako krásné tlačítko, ale ne standardní součástka vstup. A odeslání tohoto formuláře v souladu s podmínky zadání, by měl být spuštěn ihned po výběru souboru. Konečným výsledkem by měl být uživatelský formulář, jako je tento:

Název souboru:

Nahrát soubor

Jsou zde dva samostatné úkoly. Prvním je odeslání formuláře ihned po výběru souboru. Druhým je navrhnout komponentu výběru souboru v souladu s návrhem ve formě nestandardního tlačítka.

Formulář, pro který implementujeme všechny popsané úlohy, má následující zdrojový kód:

Název souboru:

a na začátku to vypadá takto:

Název souboru:

Formulář odešlete po výběru souboru ve vstupu

Podobný úkol byl popsán v článku o opětovném načtení a aktualizaci stránky výběrem v select . Tam také použili událost komponenty formuláře k odeslání formuláře pomocí skriptu.

Formulář můžete odeslat pomocí pomocí jQuery kód:

$("#formID" ).submit();

Toto volání musí být spojeno s událostí změny komponenty pro výběr vstupního souboru. Nakonec kód jQuery k vyřešení našeho formuláře by mělo být následující:

jQuery(funkce())(
$("#myfile" ).change(function())( // událost výběru souboru
$("#myform" ).submit(); // odešlete formulář
});
});

Vlastní vstupní design pomocí CSS

Složitost tohoto úkolu spočívá v nedostatku norem pro návrh komponent. V různých prohlížečích se zobrazuje odlišně. A styly CSS, které definují jeho vzhled, k jeho návrhu nestačí.

Nejjednodušší způsob, jak tento problém vyřešit, by bylo skrýt samotnou komponentu a zavolat ji, když kliknete na jiný prvek. V tomto případě vyvstává jediná otázka, jak přiřadit kliknutí na „ vlastní tlačítko" s voláním standardní události výběru souboru.

Jednou z možností by bylo znovu použít jQuery. Ale podle mého názoru, pokud se to dá obejít další skripty a používat pouze HTML tagy, pak byste to měli udělat bez skriptů. A tady nám přichází na pomoc HTML tag označení. Jeho použití již popsal článek „Přepínání přepínačů a zaškrtávacích políček kliknutím na podpis v HTML“.

Zde je obdobně tag komponenty výběru souboru obklopen tagem label. Do štítku také přidáme text „Nahrát soubor“

Název souboru:

Nahrát soubor

Nyní zbývá pouze přiřadit styly pro návrh stávajících značek. Komponenta výběru souboru je skrytá. Dejte štítku požadovaný vzhled:

#myform p (
text-align: center;
okraj : 10px 0;
}
#myform #mujsoubor (
displej: žádný;
}
#myform #mylabel (
barva pozadí : #fd685b;
odsazení: 10px 20px;
barva : #fff;
kurzor: ukazatel;
}

Prozkoumejte nové a staré selektory, které můžete použít ke stylování vstupních prvků formuláře podle toho, zda jsou pole povinná, správně vyplněná atd., navrhuje Jonathan Harrell. Představujeme vám upravený překlad jeho článku.

Je dobře známo, co použít CSS styly Formuláře byly vždy složité, ale existuje několik málo používaných selektorů, které nám poskytují významné možnosti návrhu pro vstupní pole a okolní prvky. Některé z nich jsou relativně nové, jiné jsou k dispozici již delší dobu.

Můžete se podívat na příklad jejich použití.

:placeholder-show

První selektor je relativně nový a ještě není plně podporován prohlížeči. Zdá se však, že by se dal v budoucnu docela snadno použít jako vylepšení. Tento selektor nám dává možnost určit, zda je zástupný symbol aktuálně viditelný pro uživatele. To může být užitečné, pokud chceme dynamicky skrýt a zobrazit štítek spojený se vstupem.

Zde štítek schovám, dokud uživatel nezačne psát vstup a skryje zástupný symbol. Aby se štítek objevil, používám pěkný přechodový efekt. Pamatujte, že aby to fungovalo, štítek musí následovat PO vstupu .

Zadejte nějaký text .form-group ( position: relativní; padding-top: 1,5rem; ) label ( position: absolute; top: 0; font-size: var(--font-size-small); opacity: 1; transform : translateY(0): přechod: všech 0,2s zmírnění výstupu ) vstup: zástupný symbol + štítek ( opacity: 0; transform: translateY(1rem); )

Tento selektor použijte k označení, že pole má atribut. Zde používám prázdný rozsah s třídou help-text a umísťuji nějaký obsah dynamicky pomocí pseudoprvku ::before. Ve skutečnosti to lze provést pomocí JavaScriptu, ale zahrnul jsem tento příklad, abych ukázal metodu pomocí čistého CSS.

Povinný vstupní vstup:vyžadováno + .help-text::before (obsah: "*Vyžadováno"; )

Ve srovnání s požadovaným tento volič dělá opak. Znovu používám prázdný rozsah s třídou help-text, abych ukázal nějaký možný text, pokud atribut chybí.

Input:optional + .help-text::before ( content: "*Volitelné"; )

Ten by měl být většině z vás známý, ale je důležité si ho zapamatovat. Zobrazení, zda je pole pro uživatele uzamčeno, je velmi důležité.

&:disabled ( border-color: var(--grey-lighter); background-color: var(--grey-lightest); color: var(--grey-light); )

:pouze ke čtení

Vstup s atributem jen pro čtení by měl mít trochu jiný význam než . Je dobře, že pro tento účel existuje takový volič.

input:read-only ( border-color: var(--grey-lighter); color: var(--grey); kurzor: not-allowed; )

:platný

Ačkoli většina z ověření formuláře bude provedeno s pomocí JavaScriptu, můžeme využít HTML5 jak pro ověřování formulářů, tak pro stylování vstupních polí. Tento selektor nám dává možnost stylizovat jakýkoli vstup, který aktuálně splňuje vestavěná ověřovací pravidla prohlížeče.

Zde píšu kód pro svg pro použití vlastnosti background-image k zobrazení zaškrtnutí ve vstupním poli.

Input:valid ( border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke=" none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-56.000000, -59.000000%29" fill="%232EEC96"%3E%3Cpolygon points ="70.1468531 85,8671329 97,013986 59 100,58042 62,5664336 70,1468531 93 56 78,8531469 59,56364237%% /g%3E%3C/g%3E%3C/svg%3E%0A"); )

Tento selektor kontroluje, zda vstup NEPRODEJÍ vestavěným ověřovacím pravidlům prohlížeče (například pokud zadaná adresa E-mailem neobsahuje skutečný e-mail).

Ještě jednou přidávám kód pro svg, aby se ve vstupním poli zobrazilo "X".

Input:invalid ( border-color: var(--color-error); background-image: url("data:image/svg+xml,%3Csvg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke=" none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-128.000000, -59.000000%29" fill="%23F44336"%3E%3Cpolygon points = "157,848404 61.9920213 145.980053 73,8603723 157,848404 85,7287234 154,856383 88.7207447 142,988032 76,8523936 131,11968 9.996011 73,8603723 128.12766 61.9920213 131.119681 59 142.988032 70,8683511 154,856383 59 "%3C 3C%3E%3C 3C 3C 3C/ svg%3E%0A"); )

Můžete také nastavit některé ověřovací zprávy pro každý typ vstupu pomocí span s třídou help-text a pseudoprvkem ::before.

Neplatný vstup input:invalid + .help-text::before ( content: "Musíte zadat platný e-mail." )

:in-range/:out-of-range

Tyto selektory určují, zda je hodnota číselného pole v rámci zadaných minimálních/maximálních hodnot.

Vstup mimo rozsah (hodnota musí být mezi 1 a 10) input:out-of-range + .help-text::before ( content: "Mimo rozsah"; )

Tento selektor pravděpodobně znáte. Umožňuje uplatnit vlastní styly na zaškrtávací políčka a přepínače. Moje technika stylingu zaškrtávacích políček zahrnuje vytvoření vloženého prvku a umístění štítku za vstup .

Volba

Vizuálně skryji vstup, takže zmizí z pohledu, ale stále lze kliknout. Poté upravím styl label::before, aby vypadal jako zaškrtávací políčko a label::after, aby vypadal jako zaškrtnutí. Používám selektor k odpovídajícímu stylování těchto dvou pseudoprvků.

&:checked + label::before ( background-color: var(--color-primary); ) &:checked + label::after ( display: block; position: absolute; top: 0.2rem; left: 0.375rem; šířka: 0,25rem: solid white border-width: 0 2px 2px 0;

Před zavedením CSS2 v roce 1998 byly prvky formuláře již aktivně podporovány různé prohlížeče. Tehdy ani nyní však nebylo rozhodnuto jednotný styl zobrazení těchto prvků. V důsledku toho prvky formuláře stále přebírají styly prohlížeče.

V průběhu let se weboví vývojáři snažili tento problém, který vznikl kvůli chybějící jasné CSS specifikaci pro prvky formuláře, vyřešit a udělat z prvků jako input, select, fieldset, legend a textarea render cross-browser. V tomto článku si projdeme některé CSS recepty určené ke sjednocení zobrazení formulářových prvků.

Testy Rogera Johanssona

V letech 2004 a 2007 vytvořil Roger Johansson speciální testovací sady. Nakonec došel k závěru, že pomocí CSS Není možné stylizovat formuláře pro všechny prohlížeče a platformy. Jeho analýza také odhalila, že mnoho prohlížečů ignoruje některé styly CSS.

Navzdory jeho závěrům weboví vývojáři nadále hledali ideální nebo alespoň kompromisní řešení problému zobrazení vlastní styly na různé prohlížeče a platformy.

Standardní model

Tyto prvky specifikovala specifikace CSS 2.1 formuláře textarea, input a select budou mít charakteristiky blokových i vložených blokových prvků:

Textarea, input, select ( display: inline-block; )

Prvky formuláře a sady polí zase mají vlastnosti pouze prvků bloku:

Sada polí, formulář ( display: block; )

Tím je specifikace CSS pro tyto prvky uzavřena. Všechny ostatní aspekty designu leží na bedrech prohlížečů.

Lze použít prvky, které mají jak blokovou, tak i inline charakteristiku Vlastnosti CSS jako je line-height a vertical-align, pro ovládání výšky a vertikálního zarovnání kontejneru. Mají také přístup k dalším vlastnostem, jako jsou vlastnosti padding, padding a width a height.

Pokus o stylování prvků, jako je sada polí a legenda, však způsobuje nejrůznější potíže kvůli standardním stylům prohlížeče.

Jak tento problém vyřešit?

Dimenzování

Postupem času si vývojáři webu všimli, že prohlížeče začaly zobrazovat některé prvky formuláře nesprávně, pokud měly velikost:

Vstup, výběr ( šířka: 120px; výška: 32px; )

Mnozí se pokusili přeměnit tyto prvky na prvky blokové:

Vstup, výběr ( šířka: 120px; výška: 32px; zobrazení: blok; )

Výsledky však zůstaly daleko od očekávání. Problémy nedělal pouze prvek textarea. Řešení se zrodilo až o něco později, kdy místo vlastnosti height byla použita kombinace vlastností font-size a padding.

Prohlížeče také zobrazují text a velikosti písma odlišně. To lze snadno opravit nastavením následujících nastavení:

Vstup, výběr ( šířka: 120px; písmo: 1em Arial, bezpatkové; )

Vstup, výběr ( šířka: 120px; písmo: 1em Arial, bezpatkové; výplň: 3px 6px; )

Poté můžete vydat a vnější design vstupní prvky a textová oblast:

Input, input, textarea ( border: 1px solid #ccc; )

Elementy Typ vstupu Tlačítko a odeslat prohlížeče přiřadí další výplň. To lze normalizovat takto:

Vstup, vstup ( odsazení: 2px; )

Můžeme také použít speciální předpony prohlížeče. Například pro prohlížeče běžící na webkitu můžete napsat následující styly:

Vstup, vstup, vstup, vstup::-webkit-file-upload-button, button ( -webkit-box-align: center; text-align: center; kurzor: výchozí; barva: buttontext; padding: 2px 6px 3px; border : 2px začátek buttonface: initial-color: buttonface: border-box ) input, input, input ( -webkit-appearance: push-button; white-space: pre; )

Odsazení lze také použít na prvky sady polí a legend, ale s některými zvláštními úvahami:

Nastavení odsazení prvku sady polí na 0 může způsobit, že prvky legendy ztratí odsazení v některých prohlížečích (ne v IE);

Pokud nastavíte výplň prvku legendy na 0, budou tyto prvky příliš komprimované.

Nastavením následujících vlastností můžete normalizovat a sjednotit zobrazení zaškrtávacích políček, přepínačů a výběrových polí:

• rodina písem
• velikost písma
• šířka (pro výběrová pole),
• vycpávka.

Aplikací těchto pravidel na uvažovanou skupinu prvků můžete dosáhnout identicky zobrazeného obsahu v různých prohlížečích.

Zarovnání

Formulářové prvky lze zarovnat svisle i vodorovně. Chcete-li umístit prvky na stejný řádek jako ostatní prvky, použijte:

• float vlastnost;
• použít blokovou povahu těchto prvků (inline-blok); Když použijete vlastnost float, dotčené prvky se automaticky převedou na prvky bloku a lze na ně nyní použít speciální vlastnosti bloku.

Pomocí plováku hlavní problém stane se vertikálním zarovnáním. Řešením je použít vnitřní nebo vnější horní polstrování:

Vstup, výběr ( šířka: 120px; plovoucí: vlevo; margin-top: 0,4 em; )

Tato metoda je vhodná, pokud potřebujeme zarovnat bloky s textem. Pokud chceme vytvářet formuláře s prvky štítků, musíme použít ještě jedno pravidlo:

Tlačítka mají také problém se zobrazením. Pokud je výška vašeho tlačítka větší než výška sousedních prvků, můžete jej zarovnat svisle přidáním pozice: relativní:

Vstup ( plovoucí: vlevo; šířka: 90px; pozice: relativní; nahoře: 0,4 em; )

Tento přístup je také vhodný pro zaškrtávací políčka a přepínače. Lze jej také použít na prvek legendy s vnitřními sadami polí, přičemž se změní pouze jedna věc: shora doleva.

Pokud máme co do činění s vloženými prvky, pak se vertikální zarovnání použije přidáním vlastnosti vertical-align:

Štítek, vstup (zarovnat svisle: na střed; na okraji vpravo: 1 m; )

Dobré je také kombinovat tento přístup s přidanou výškou řádku. Musí se však přidat do nadřazeného prvku. Pokud se přihlásíte tuto vlastnost přímo k některému prvku, jeho výška se může zvýšit.

Řádek formuláře ( výška řádku: 1,4; )

Tomu lze předejít nastavením konkrétní výšky:

Řádek formuláře ( výška řádku: 1,8; výška: 1,8 em; )

Můžete také nastavit zarovnání pro vložené prvky pomocí vlastnosti text-align.

Problémy s položkami nahrávání souborů

Prvky nahrávání souborů vyžadují zcela odlišný přístup. Z bezpečnostních důvodů musí být tyto prvky vždy viditelné a rozpoznatelné. To je důvod, proč prohlížeče často jednoduše ignorují naše pokusy stylizovat tyto prvky pomocí standardní styly.

Navíc různé prohlížeče zobrazují i ​​tento prvek odlišně. Někde je prezentován jednoduše jako tlačítko, někde - s textovým polem.

I zde však weboví vývojáři našli mezeru. Za prvé, tento prvek je třeba umístit do bloku div:

Skrytí prvku pro nahrání souboru se provádí použitím vlastnosti opacity. Pak můžete kouzlit se svými vlastními styly:

Upload ( šířka: 157px; výška: 57px; pozadí: url(upload.png) bez opakování; přetečení: skryté; ) .upload input (zobrazení: blok !důležité; šířka: 157px !důležité; výška: 57px !důležité; neprůhlednost : 0 !důležité: skryté !důležité )

Věnujte pozornost zadání! důležité. Tento Nejlepší způsob nahradit výchozí styly prohlížeče.

Závěr

Ano, standardní styly prohlížečů často znemožňují zobrazení formulářových prvků stejným způsobem v různých prohlížečích. Uplatněním těchto pravidel však můžeme, když ne snížit všechny problémy na nulu, tak alespoň výrazně zlepšit situaci.