Keresési űrlap elrendezése. Stílusos keresőmező a CSS3-on Keresési űrlap html5 css3

Kritizáltak, mondván, az elrendezés rossz, de létezik modern HTML5 és CSS3.

Természetesen megértem, a legújabb szabványok menők, meg minden. De a tény az, hogy én, mint általában, az elrendezés megrendelésre, és a legtöbb esetben a teljes azonosság fontos különböző böngészők, amely nem teszi lehetővé a legújabb technológiák használatát. Ezért elsősorban a böngészők közötti kompatibilitásra koncentrálok, és megszokásból a keresési űrlapot „a régi módon” fektettem le.

Általánosságban elmondható, hogy ezzel a bejegyzéssel korrigálom a helyzetet (az előző cikkel elégedetlenek kedvéért =), és felajánlom a saját változatomat ugyanannak a keresési űrlapnak az elrendezéséről, de HTML5 és CSS3 technológiákat használva.

Példa áll rendelkezésre arra vonatkozóan, hogy mi fog történni ennek eredményeként.

Mit veszítünk, ha ezt az űrlapot HTML5 és CSS3 használatával tervezzük?

1. IE9 és az alatti verziók – nem fogjuk látni az alapértelmezett szöveget (placeholder attribútum).
2. IE8 és alatta - nem fogunk látni lekerekített sarkokat és belső árnyékokat.
3. IE7 - ehhez más űrlapszélességet kell megadni, mert... nem támogatja a dobozméret tulajdonságot.
4. IE6 - de egyáltalán nem vesszük figyelembe =)

Más modern böngészőkben minden rendben van. Úgy gondolom, hogy a fenti hiányosságok nem kritikusak, ezért az oldalamhoz nyugodtan használnék a legújabb technológiákkal kialakított űrlapot.

Keresés űrlap HTML kód

Így néz ki:

Az előző cikkben szereplő űrlaphoz képest a következő változtatások történtek a HTML5 technológiának megfelelően:

1. A type="text" attribútumot a type="search" váltotta fel.
2. A szövegközi szkript helyére helyőrző="search" .!}

CSS kód

Ez minden szükséges stílusok megjegyzésekkel:

Keresés ( /* állítsa be az űrlap kívánt szélességét a tervezéstől függően ** az űrlap problémamentesen nyúlik */ szélesség: 35%; /* a küldés gombot feltétlenül pozícionáljuk, ** ezért ez a tulajdonság szükséges */ pozíció: relativ : 100% /* a felső (8px) és az alsó (9px) belső párnázás miatt ** állítsa be az űrlap magasságát ** tegye nagyobbra a jobb oldali (37px) belső párnázást, ** mivel a küldés gomb kerül oda */ padding: 8px 37px 9px 15px /* úgy, hogy a beviteli mező szélessége (100%) tartalmazza a belső kitöltést */ -moz-box-sizing: border-box; -box /* belső árnyékok hozzáadása */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3) /* a sarkok körül *; / border-radius: 20px font: 13px Tahoma, Arial, sans-serif color : #555;

vázlat: nincs; ) /* a beviteli mező kialakításának megváltoztatása fókuszban */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4 ); háttér: #E8E8E8; szín: #333 0; szélesség: 37px ; ) /* a kurzor mozgatásakor módosítsa a küldés gomb átlátszóságát */ .search .submit:hover ( opacitás: 0,8; ) /* ez a tulajdonság szükséges ahhoz, hogy a böngészőkben ** Chrome és Safari stílusozhassa a bemeneteket */ bemenet ( -webkit-megjelenés: nincs; )

És stílusok az IE-hez a 9-es verzió alatt:

/* külön stílusok beállítása az IE böngészőkhöz a 9-es verzió alatt */ *+html .search ( /* IE7 esetén állítsa be a szélességet más böngészőkhöz, és adjon hozzá egy jobb ** kitöltést, hogy a küldés gomb a helyén legyen */ szélesség: 28 % ; padding: 0 52px 0 0; .search .input (szegély: 1px tömör #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input: fókusz ( keret: 1px szilárd #CFCFCF: 1px solid #999 ) .search .submit ( szűrő: alfa(átlátszatlanság=50); ) .search .submit:hover ( filter: alpha(opacity=80); ) Köszönjük a kritikusoknak az előző cikkhez fűzött megjegyzéseiket! Neked köszönhetően néhány új elrendezési pont megragadt a fejemben.

A cikk leírja a webhely keresési űrlapjának elrendezési jellemzőit, példát ad a szemantikai kód jelölésére, a CSS3-ban való tervezésre, valamint egy kis jQuery varázslatot a végén.

• Jelzés

  A HTML5 megjelenése előtt a keresési űrlapot szokványos szövegmezővé alakították, fokozatosan bekerülve az életünkbe. új verzió A jelölőnyelv speciális keresőmezőtípussal rendelkezik. Tehát egy modern webhely HTML-kódjában valami ilyesmit láthatunk:

  A kód eredménye FF, Opera, IE9 alatt:

  És egy kicsit másképp a webkit motoron alapuló böngészőkben (Chrome, Safari):

  Keresőmező a webkitben

  Amint látható, amikor egy mezőre fókuszál, egy kiemelés kerül hozzáadásra, és a szöveg beírásakor megjelenik egy tiszta gomb, amikor rákattint, a mező tartalma törlődik, ami önmagában is nagyon kényelmes.

  CSS-stílus nélkül a keresési űrlapunk egyelőre meglehetősen egyszerűnek tűnik, ebben a cikkben valami ilyesmivel próbálkozunk:

  
  Például: keresési űrlap elrendezése

  Ha nem tervezik a régebbi böngészők támogatását, akkor egy üres, nem szemantikai elem

  helyettesíthető a pszeudoelemmel:befor .

  A keresőűrlap kialakításának jellemzői

  Mivel úgy döntöttem, hogy elég sok CSS3 tulajdonságot használok, régebbi Internet Explorer böngészőkben ezek a csodák nem működnek, a böngészők közötti kompatibilitás eléréséhez pedig mankókat kell csatlakoztatni, valamit csinálni a képekkel stb.

  Először is néhány jellemzőre szeretném felhívni a figyelmet, nevezetesen:

  • stilizáció webkit motoron alapuló böngészőkben
  • helyőrző stílus

  Űrlapstílusok keresése a Chrome és a Safari böngészőkben

  Adjunk stílust a mezőhöz a .search osztállyal:

  Keresés (háttér: #d8e6ef; szegély: 1px tömör #000; )

  Eredmény a képernyőképen:

  Keresés az FF, Opera, Chrome és Safari böngészőkben

  A Chrome-ban szokás szerint tétovázás és zűrzavar tapasztalható, a szegély valahogy furcsán működik (a margók úgy jelennek meg, mintha paddingot állítanánk be), míg a Safari teljesen figyelmen kívül hagyja a szabályokat. De van megoldás erre a helyzetre, adja hozzá a következő szabályt a CSS-kódhoz:

  Keresés ( -webkit-megjelenés: nincs; )

  Most már minden normális a webkitekben, de továbbra is különböznek a mezők kiemelésében, ha alapértelmezés szerint fókuszálnak és a törlés gombbal. Ezek az elemek, bár gyakran kényelmesek, néha elronthatják a tervezési szándékot, és le kell tiltani. A háttérvilágítás eltávolítása nagyon egyszerű:

  Search:focus ( körvonal: nincs; /* fókusz kiemelés eltávolítva */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : beillesztés 0 0 2px #000 box-shadow: inset 0 0 2px #000 /* belső árnyék hozzáadva minden böngészőhöz */ )

  Már csak a törlés gombtól kell megszabadulni. Valójában könnyen stilizálható, ha egy egyszerű keresztet valamilyen háttérrel helyettesítünk, pozícionálunk stb., de az én példámban nem lesz rá szükség:

  /* szabály csak egy keresési osztályú elemre */ .search::-webkit-search-cancel-button ( megjelenítés: nincs; /* eltávolította a törlés gombot */ ) /* vagy minden olyan mezőre, ahol a keresés típusa a dokumentum */ input ::-webkit-search-cancel-button (megjelenítés: nincs; )

  Szöveges eszköztipp helyőrző tervezése

  Sajnos a szöveges utalással minden kicsit bonyolultabb, mint amilyennek első pillantásra tűnik. Először is, az IE9-ben nem működik, nem beszélve a régebbi böngészőkről, ezért a kritikus helyeken, ahol feltétlenül szükséges valamilyen szöveg a mezőben, JavaScriptet kell használni. Másodszor, a helyőrző rosszul van megtervezve a Firefox, Chrome, Safari böngészőkben, és egyáltalán nem alkalmas az Operára:

  :-moz-placeholder ( szín: #304e62; /* megváltoztatta a színt az FF-ben */ ) ::-webkit-input-placeholder ( szín: #304e62; /* megváltoztatta a színt a webkitben */ )

  Kérjük, vegye figyelembe, hogy ezek a kiválasztók nem működnek, ha vesszővel vannak elválasztva, mindegyiknek új sorban kell kezdődnie.

  Olyan különleges pillanatokat vettem figyelembe, amikor nehézségek adódhatnak, a többi rész nem okozhat problémát egy többé-kevésbé tapasztalt tervezőnek.

  jQuery szkriptek

  Végül adjunk hozzá néhány szkriptet az űrlapunkhoz, nevezetesen:

  • üres mező elküldésekor töröljük a kérést és hibaüzenetet jelenítünk meg
  • ha a mezőre fókuszálunk, az aljára egy kis eszköztippet adunk

  A jQ erejével mindezt nagyon egyszerű megvalósítani, a következő kódot kaptam megjegyzésekkel:

  $(function() ( /* feldolgozza az űrlap beküldését */ $(".search-form").submit(function() ( var errVal = "üres kérés"; /* Ha a mező üres vagy az errVal értéket tartalmazza */ if( $(.search").val() == "" || $(.search").val() == errVal) ( /* adja hozzá az errVal értéket a mezőhöz, módosítsa a háttér színét és */ $(" .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - az űrlap nincs elküldve */ return false ; / * ha a mező fókuszált this).val("").css((backgroundColor : "#d8e6ef")); /* tooltip megjelenítése */ $(.notice").fadeIn(400 )); ".search").blur(function( ) ( /* az eszköztipp eltávolítása */ $(.notice").fadeOut(400; ));

  Természetesen a legjobb, ha a szkriptben lévő osztályokat azonosítókkal helyettesítjük a gyorsabb szkriptműködés érdekében, és még ha más, azonos osztályú elemek is megjelennek a dokumentumban, azok nem törik meg a szkript működését.

  Eredmények

  Így terveztünk és programoztunk egy keresési űrlapot az oldalhoz, ez működik legújabb verziói Firefox, Chrome, Opera, Safari és IE9+. Ha nagyon akarod, készíthetsz többé-kevésbé több böngészőt is, kezdve az IE6-tal.

  Ellenőrzött

  • Internet Explorer 9+
  • Opera
  • Firefox
  • Króm
  • Szafari

  Segítse a projektet

A keresőmező valószínűleg az egyik gyakori felhasználói felület elem. Amikor a felület felhasználóbarát szintjén dolgozik, nagyon gyakran felmerül a vágy egy stílusos keresőmező hozzáadására. Ebben az oktatóanyagban egy ilyen népszerű elemet fogunk létrehozni pszeudoelemek segítségével.

HTML jelölés

Egy ilyen mező elkészítéséhez a jelölés minimális lesz.

A speciális HTML5 helyőrző és a kötelező attribútumok itt használatosak:

• helyőrző- ez az attribútum azt határozza meg, hogy a szöveg megjelenjen a mezőben, mielőtt a mező beviteli fókuszt kapna, majd a szöveg el van rejtve.
• kívánt- ez az attribútum egy kötelező feltételt határoz meg az adatbeviteli mezőben az űrlap elküldése előtt.

A HTML5 a type attribútumnak is új jelentést kapott: type="search" . De a böngészőkben gyengén támogatott, ezért egyelőre nem fogjuk használni.

Az olyan HTML elemeknek, mint az img és az input, nincs tartalom. Ezért egy pszeudoelem, például:before, nem jelenít meg nyilat a gombhoz.

A probléma megoldása esetünkben a type="submit" gomb használata az input type="submit" helyett. Így az ENTER billentyűt használva megtartjuk az űrlapot.

CSS

Az alábbiakban bemutatjuk a bemutatónkhoz szükséges stílusokat:

Szöveg tördelésének megszakítása

Cf:before, .cf:after( tartalom:""; display:table; ) .cf:after( clear:botth; ) .cf( zoom:1; )

Űrlapelemek

A jobb áttekinthetőség érdekében a böngésző előtagjai nem jelennek meg a kódban. A teljes kódot a forrásszövegben láthatja.

/* Az űrlaptároló stílusai */ .form-wrapper (szélesség: 450px; kitöltés: 15px; margó: 150px auto 50px auto; háttér: #444; háttér: rgba(0,0,0,.2); border- sugár : 10 képpont ; padding: 10px 5px; font: 15px border: 0px 0 3px 0 0 2px rgba(0,0,0,.8) inset ) .form-wrapper input::-webkit -input-placeholder ( szín: #999; font-weight: normal; font-style: italic; ) . form-wrapper input:-moz-placeholder ( szín: #999; font-weight: normal; font-style: italic ; ) .form-wrapper input:-ms-input-placeholder ( szín: #999; font-weight: normál betűstílus: dőlt ) /* Űrlapküldés gomb */ .form-wrapper gomb ( túlcsordulás: látható; pozíció: relatív lebegés: jobb; határ: 0; párnázás: 0;

kurzor: pointer; magasság: 40px;.

szélesség: 110 képpont;

betűtípus: félkövér 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; szín: #fff; szöveg-átalakítás: nagybetűk;

CSS

Először indítsuk újra a stílusokat webkit böngészők, amelyek általában hozzáadódnak a keresőmotorokhoz bemenet címkék keret, bezárás ikonra. Tehát távolítsuk el ezeket a felesleges dolgokat:

Input ( körvonal: nincs; ) input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration , input::-webkit-search-cancel-button (megjelenítés: nincs; /* távolítsa el a keresést és mégse ikont */ )

Hozzunk létre egy keresési űrlapot:

Nem foglalkozunk az összes tulajdonsággal, csak megjegyezzük, hogy először a keresési bevitel szélessége számít 55 képpont, és a következőre bővül 130 képpont a fókusz pillanatában :fókusz. Ingatlan átmenet lehetővé teszi a szélesség változásának animálását. Ragyogtatásra használt doboz-árnyék:

Bemenet ( háttér: #ededed url(search-icon.png) nem ismétlődik 9 képpont középen; szegély: tömör 1px #ccc; kitöltés: 9px 10px 9px 32px; szélesség: 55px; -webkit-border-radius: 10em; -moz- border-radius: 10em -webkit-transition: all .5s: #6dcff6, 5px rgba; .5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);

IN demo 2 bemenet A keresőmező még kompaktabb – csak az ikon jelenik meg. Ha rákattint, a beviteli mező szélessége is megváltozik.

#demo-b bemenet ( szélesség: 18px; padding-bal: 10px; szín: átlátszó; kurzor: pointer; ) #demo-b input:hover ( háttérszín: #ffff; ) #demo-b bemenet:focus ( szélesség : 130px, padding-bal: 32px background-color: #fff;

A szöveget pedig átlátszóvá tették:

#demo-b bemenet:-moz-placeholder ( szín: átlátszó; ) #demo-b bemenet::-webkit-input-placeholder ( szín: átlátszó; )

Az űrlap minden modern böngészőben működik Króm, Firefox, Szafari, És IE8+.

Az oldal keresőmezője az egyik legfontosabb felhasználói felület elem a weboldalon. Segítségével a felhasználó megtalálhatja webhelyén a kívánt tartalmat.

Ebből az oktatóanyagból megtudhatja, hogyan hozhat létre keresőmezők jelölését HTML5 használatával, valamint hogyan formázhatja meg az űrlapelemeket a CSS3 erejével, szkriptek használata nélkül.

1. HTML jelölés

Elem

3. Keresőmező belül gombbal

4. Lapos stílusú keresőmező

5. Keresőmező vastag alsó szegéllyel

6. Keresőmező változó szegélyszínnel

7. Kihúzható keresőmező

A keresőmező akkor jelenik meg, ha a ikonnal ellátott gombra kattint.

8. A keresőmező bővítése