Vackert sökformulär i css3. Designa ett vackert CSS3-sökformulär
Jag fick kritik, säger de, layouten suger, men det finns moderna HTML5 och CSS3.
Naturligtvis, jag förstår, de senaste standarderna är coola och allt det där. Men faktum är att jag som regel gör typsättning på beställning, och i de flesta fall är fullständig identitet i olika webbläsare viktig, vilket inte tillåter användning av den senaste tekniken. Därför fokuserar jag främst på kompatibilitet över webbläsare och skapade av vana sökformuläret "på det gamla sättet".
I allmänhet, med det här inlägget korrigerar jag situationen (för dem som var missnöjda med den senaste artikeln =) och erbjuder min version av layouten för samma sökformulär, men med HTML5 och CSS3-teknologier.
Ett exempel på vad som händer som ett resultat är möjligt.
Vad förlorar vi när vi lägger ut detta formulär med HTML5 och CSS3
- IE9 och lägre - kommer inte att se standardtexten (platshållarattribut).
- IE8 och lägre - kommer inte att se rundade hörn och inre skuggor.
- IE7 - du måste ange en annan formulärbredd för det, eftersom den stöder inte egenskapen för boxstorlek.
- IE6 - men vi tar inte hänsyn till det alls =)
I andra moderna webbläsare är allt bra. Jag tror att ovanstående brister inte är kritiska, så för min webbplats skulle jag djärvt använda ett formulär utformat med den senaste tekniken.
Sökformulär HTML-kod
Det ser ut så här:
Jämfört med formuläret från föregående artikel har följande ändringar gjorts i enlighet med HTML5-teknik:
- Attributet type="text" har ersatts med type="search" .
- Inline script ersatt med platshållare="(!LANG:search" .!}
CSS-kod
Här är alla nödvändiga stilar med kommentarer:
Sök ( /* ställ in önskad bredd på formuläret beroende på designen ** formuläret sträcker sig utan problem */ bredd: 35%; /* Skicka-knappen kommer att placeras absolut, ** så denna egenskap behövs */ position: relativ; ) .search input ( /* inaktivera kanter på indata */ border: none; ) /* stilar för inmatningsfältet */ .search .input ( /* sträck ut inmatningsfältet till hela bredden av formen */ width : 100 %; /* på grund av topp (8px) och botten (9px) utfyllnad ** justera höjden på formuläret ** utfyllnad till höger (37px) mer än den vänstra, ** eftersom skicka-knappen kommer att vara placeras där */ padding: 8px 37px 9px 15px; /* för att göra inmatningsfältets bredd (100 %) inkluderad inline-utfyllnad */ -moz-box-sizing: border-box; box-sizing: border-box; / * lägg till inline-skuggor */ box-shadow: insatt 0 0 5px rgba(0,0 ,0,0.1), insatt 0 1px 2px rgba(0,0,0,0.3); /* runda hörn */ kant-radius: 20px; bakgrund: #EEE; teckensnitt: 13px Tahoma, Arial, sans-serif; färg: #555; outline: ingen; ) /* ändra utseendet på inmatningsfältet på fokus */ .search .input:focus ( box-shadow: insatt 0 0 5px rgba(0,0,0,0.2), insatt 0 1px 2px rgba(0,0, 0,0.4 ); bakgrund: #E8E8E8; färg: #333; ) /* formatera skicka-knappen */ .search .submit ( /* placera knappen absolut från högerkanten av formuläret */ position: absolut; topp: 0; höger: 0; bredd: 37px; /* sträck ut knappen till formulärets fulla höjd */ höjd: 100%; markör: pekare; bakgrund: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% no-repeat; /* lägg till transparens i skicka-knappen */ opacitet: 0,5; ) /* ändra transparensen för submit-knappen på harchover */ submit-knappen. .submit:hover ( opacitet: 0.8; ) /* den här egenskapen behövs för att webbläsare ** Chrome och Safari kan utforma inmatningar */ input ( -webkit-appearance: none; )
Och stilar för IE under version 9:
/* ställ in separata stilar för IE under version 9 */ *+html .search ( /* för IE7 justera bredden för andra webbläsare och lägg till en höger ** utfyllnad så att skicka-knappen passar på plats */ bredd: 28 %; utfyllnad : 0 52px 0 0; ) .search .input ( kantlinje: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( kantlinje: 1px solid #CFCFCF; border-top: 1px solid #999; ) .search .submit ( filter: alpha(opacity=50); ) .search .submit:hover ( filter: alpha(opacity=80); )
P.S. Tack till kritikerna för kommentarerna till föregående artikel! Tack vare dig har jag några nya layoutögonblick i mitt huvud.
Två alternativ för sökformulär som sparar utrymme på din webbplats. När du klickar på den expanderas formuläret för textinmatning. Endast använd CSS3.
HTML
Enkel form med html5 märka:
css
Låt oss först starta om stilarna för webbkit webbläsare som tenderar att lägga till i sökmotorer inmatning tag ram, stäng ikon. Därför kommer vi att ta bort allt detta överflödiga:
Indata ( outline: none; ) input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration , input::-webkit-search-cancel-button ( display: ingen; /* ta bort sök- och avbrytikonen */ )
Låt oss skapa ett sökformulär:
Vi kommer inte att uppehålla oss vid alla egenskaper, bara notera att bredden på sökinmatningen först har ett värde 55 pixlar, och kommer att expandera till 130 pixlar i fokusögonblicket :fokus. Fast egendom övergång låter dig animera denna förändring i bredd. Används för glöd box skugga:
Indata ( bakgrund: #ededed url(search-icon.png) no-repeat 9px center; kant: fast 1px #ccc; utfyllnad: 9px 10px 9px 32px; bredd: 55px; -webkit-border-radius: 10em; -moz- border-radius: 10em; border-radius: 10em; -webkit-transition: alla .5s; -moz-transition: alla .5s; transition: alla .5s; ) input:focus (bredd: 130px; bakgrundsfärg: # fff; kantfärg: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 0-skugga: 0 5px rgba(109,207,246,.5); )
PÅ demo 2 inmatning sökfältet är ännu mer kompakt - endast ikonen kommer att visas. Om du klickar på den ändras också bredden på inmatningsfältet.
#demo-b input ( width: 18px; padding-left: 10px; color: transparent; cursor: pointer; ) #demo-b input:hover (bakgrundsfärg: #fff; ) #demo-b input:focus ( bredd : 130px; utfyllnad-vänster: 32px; färg: #000; bakgrundsfärg: #fff; markör: auto; )
Och texten görs transparent:
#demo-b input:-moz-placeholder ( färg: transparent; ) #demo-b input::-webkit-input-placeholder ( färg: transparent; )
Formuläret fungerar i alla moderna webbläsare Krom, Firefox, safari, och IE8+.
En av de mest använda delarna av en webbplats är sökformuläret. Om du vill förbättra användbarheten på din webbplats och göra det mycket enklare att hitta det du letar efter, bör du göra allvar med att utforma ett sökformulär.
Så idag vill vi berätta om hur du designar ett sökformulär med CSS3-egenskaper.
Du har förmodligen redan hittat tutorials om att designa ett CSS3-sökformulär tidigare, men idag vill vi erbjuda dig ett lite annorlunda alternativ - ett sökformulär med en 3D-effekt implementerad med parametern box-shadow.
pålägg
Nedan kan du se HTML-koden som används för att utveckla detta formulär. Observera att vårt filler är utvecklat med HTML5, och vi har använt alla nödvändiga attribut.
Först ville vi använda type="search" som introducerades i HTML5, men ändrade oss sedan på grund av inkompatibilitet med många moderna webbläsare. Nu måste vi lägga till några extra rader med CSS-kod för att skriva över de ursprungliga värdena.
CSS-kod
Låt oss ta en titt på de minimala stilar som används för att skapa ett vackert CSS3-sökformulär:
Form-omslag (
bredd: 450px
stoppning: 8px
marginal: 100px auto;
overflow: gömd;
kantbredd: 1px;
border-stil: solid
kantfärg: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radie: 10px;
-webkit-border-radius: 10px;
kantradie: 10px
bakgrundsfärg: #f6f6f6;
bakgrundsbild: -webkit-gradient(linjär, vänster överst, vänster nere, från(#f6f6f6), till(#eae8e8));
bakgrundsbild: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
bakgrundsbild: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
bakgrundsbild: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
bakgrundsbild: -o-linear-gradient(top, #f6f6f6, #eae8e8);
bakgrundsbild: linear-gradient(top, #f6f6f6, #eae8e8);
}
Formulär-omslag #sök(
bredd: 330px
höjd: 20px;
stoppning: 10px 5px;
flyta till vänster;
teckensnitt: fet 16px "lucida sans", "trebuchet MS", "Tahoma";
kantlinje: 1px fast #ccc;
-moz-box-shadow: 0 1px 1px #ddd infälld, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd infälld, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd infälld, 0 1px 0 #fff;
-moz-border-radie: 3px;
-webkit-border-radius: 3px;
kantradie: 3px
}
Form-wrapper #search:focus (
disposition: 0;
kantfärg: #aaa;
-moz-box-shadow: 0 1px 1px #bbb infälld;
-webkit-box-shadow: 0 1px 1px #bbb infälld;
box-shadow: 0 1px 1px #bbb infälld;
}
Form-wrapper #search::-webkit-input-placeholder (
färg: #999;
font-weight: normal
}
Form-wrapper #search:-moz-placeholder (
färg: #999;
font-weight: normal
}
Form-wrapper #search:-ms-input-placeholder (
färg: #999;
font-weight: normal
}
Formulärinpackning #submit (
float:right;
kant: 1px fast #00748f;
höjd: 42px;
bredd: 100px
stoppning: 0;
markör: pekare;
teckensnitt: fet 15px Arial, Helvetica;
färg: #fafafa;
text-transform: versaler;
bakgrundsfärg: #0483a0;
bakgrundsbild: -webkit-gradient(linjär, vänster upptill, vänster nere, från(#31b2c3), till(#0483a0));
bakgrundsbild: -webkit-linear-gradient(top, #31b2c3, #0483a0);
bakgrundsbild: -moz-linear-gradient(top, #31b2c3, #0483a0);
bakgrundsbild: -ms-linear-gradient(top, #31b2c3, #0483a0);
bakgrundsbild: -o-linear-gradient(top, #31b2c3, #0483a0);
bakgrundsbild: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radie: 3px;
-webkit-border-radius: 3px;
kantradie: 3px
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) infälld, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) infälld, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) infälld, 0 1px 0 #fff;
}
Form-wrapper #submit:hover,
.form-wrapper #submit:focus (
bakgrundsfärg: #31b2c3;
bakgrundsbild: -webkit-gradient(linjär, vänster topp, vänster botten, från(#0483a0), till(#31b2c3));
bakgrundsbild: -webkit-linear-gradient(top, #0483a0, #31b2c3);
bakgrundsbild: -moz-linear-gradient(top, #0483a0, #31b2c3);
bakgrundsbild: -ms-linear-gradient(top, #0483a0, #31b2c3);
bakgrundsbild: -o-linear-gradient(top, #0483a0, #31b2c3);
bakgrundsbild: linear-gradient(top, #0483a0, #31b2c3);
}
Form-wrapper #submit:active (
disposition: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) insatt;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) insatt;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0,5) insatt;
}
Form-wrapper #submit::-moz-focus-inner (
gräns: 0;
}
Webbläsarstöd
Nedan kan du se några skärmdumpar som visar vårt sökformulär. Du bör märka att det också fungerar bra om sidan öppnas i en äldre version av webbläsaren. Jag skulle också vilja tillägga att detta CSS3-sökformulär är helt klart att använda.
Moderna webbläsare Chrome, Firefox, Safari, Opera, IE10:
Observera att Opera för närvarande stöder platshållarattributet i HTML5, men det kan inte formateras.
Den goda nyheten är att IE10 också stöder HTML5 filler.
Äldre versioner av IE (6/7/8):
*
Sammanfattningsvis
Om du har läst våra tidigare artiklar så vet du förmodligen att vi här utvecklar fungerande applikationer (med och utan återställningsversioner) för alla webbläsare. Och detta exempel är inget undantag.
Förutom att använda ett CSS3-formulär för att skapa ett sökblock, kan du enkelt anpassa det för att skapa ett auktoriseringsformulär eller ett prenumerationsformulär.
Artikeln beskriver funktionerna i layouten för webbplatssökningsformuläret, ger ett exempel på semantisk koduppmärkning, CSS3-design, plus lite jQuery-magi i slutet.
-
pålägg
Före tillkomsten av HTML5 gjordes sökformuläret till ett vanligt textfält, med den gradvisa ankomsten av en ny version av märkningsspråket i våra liv, dök det upp en speciell typ av sökfält för det. Så i HTML-koden på en modern webbplats kan vi se något sånt här:
Kodresultat i FF, Opera, IE9:
Och lite annorlunda i webbläsare baserade på webkit-motorn (Chrome, Safari):
Sökruta i webkitSom du kan se, när fokus läggs till i fältet, läggs en markering till, och när du skriver in text visas en tydlig knapp, när du klickar på den raderas innehållet i fältet, vilket är ganska bekvämt i sig.
Utan CSS-styling ser vårt sökformulär ganska enkelt ut än så länge, i den här artikeln kommer vi att försöka göra något så här:
till exempel: sökformulärets layout
Om inte stöd för äldre webbläsare planeras, ett tomt icke-semantiskt element
kan ersättas med pseudo-element:before .Funktioner i utformningen av sökformuläret
Eftersom jag bestämde mig för att använda många CSS3-egenskaper kommer dessa mirakel inte att fungera i gamla Internet Explorer-webbläsare, och för att uppnå kompatibilitet över webbläsare måste du ansluta kryckor, göra något med bilder etc.
Först och främst skulle jag vilja uppmärksamma några funktioner, nämligen:
- stilisering i webbläsare
- platshållarstil
Sökformulärstilar i webbläsare Chrome, Safari
Låt oss lägga till lite stil till fältet med klassen .search:
Sök ( bakgrund: #d8e6ef; kantlinje: 1px fast #000; )
Resultat av skärmdump:
Sök i webbläsarna FF, Opera, Chrome och SafariSom vanligt i webbläsare är det häpnadsväckande och förvirring, i Chrome fungerar gränsen på något konstigt sätt (marginaler visas, som om vi ställer in utfyllnad), Safari ignorerar reglerna helt. Men det finns en lösning i den här situationen, vi lägger till denna regel till CSS-koden:
Sök ( -webkit-utseende: ingen;)
Nu är allt bra i webkits, men de skiljer sig fortfarande åt när det gäller att markera fält på standardfokus och en tydlig knapp. Dessa element, även om de ofta är bekväma, kan ibland förstöra designidén och måste inaktiveras. Att ta bort bakgrundsbelysningen är väldigt enkelt:
Search:focus ( outline: none; /* remove focus highlight */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : insats 0 0 2px #000; box-shadow: insats 0 0 2px #000; /* lagt till innerskugga som ett alternativ för alla webbläsare */ )
Det återstår att bli av med rensningsknappen. Faktum är att det enkelt kan stylas genom att ersätta ett enkelt kors med någon sorts bakgrund, placerad etc., men i mitt exempel kommer det inte att behövas:
/* regel endast för element med klasssökning */ .search::-webkit-search-cancel-button ( display: none; /* borttagen raderingsknapp */ ) /* eller alla fält med typ sök i dokument */ input : :-webkit-search-cancel-button ( display: ingen; )
Formatera platshållarens textverktygstips
Tyvärr, med en texttips, är allt lite mer komplicerat än det verkar vid första anblicken. För det första så fungerar det inte i IE9, för att inte tala om äldre webbläsare, så JavaScript bör användas på kritiska platser där viss text i ett fält krävs initialt. För det andra, platshållare lämpar sig inte bra för design i webbläsare Firefox, Chrome, Safari och lämpar sig inte alls för Opera:
:-moz-placeholder ( färg: #304e62; /* ändrade färg i FF */ ) ::-webkit-input-placeholder ( färg: #304e62; /* ändrade färg i webkit */ )
Observera att dessa väljare inte fungerar om de är listade separerade med kommatecken, var och en måste börja på en ny rad.
Jag övervägde speciella ögonblick då svårigheter kunde uppstå, resten borde inte orsaka problem för en mer eller mindre erfaren layoutdesigner.
jQuery-skript
Låt oss slutligen lägga till några skript till vårt formulär, nämligen:
- låt oss avbryta begäran och visa ett felmeddelande när vi skickar ett tomt fält
- när du fokuserar på fältet, lägg till ett litet verktygstips längst ner
Det är väldigt enkelt att implementera allt detta med kraften i jQ, jag fick följande kod med kommentarer:
$(function() ( /* hantera formulärinlämning */ $(".search-form").submit(function() ( var errVal = "tom begäran"; /* Om fältet är tomt eller innehåller errVal-värdet */ if ( $(".search").val() == "" || $(".search").val() == errVal) ( /* lägg till errVal värde i fältet, ändra bakgrundsfärg och */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - formuläret skickas inte in */ return false; ); ) ); / * när fältet är fokuserat */ $(".search").focus(function() ( /* ställ in fältvärdet till tomt, ställ in bakgrundsfärgen till standard */ $(this).val(""). css((backgroundColor: "#d8e6ef")); /* visa verktygstips */ $(".notice").fadeIn(400); )); /* när fokus tas bort */ $(".search"). blur(function( ) ( /* remove tooltip */ $(".notice").fadeOut(400); )); ));
Naturligtvis är det bäst att ersätta klasser i skriptet med identifierare för snabbare skriptdrift, och om andra element med samma klasser dyker upp i dokumentet kommer de inte att bryta skriptet.
Resultat
Således designade och programmerade vi sökformuläret för sajten, det fungerar i de senaste versionerna av Firefox, Chrome, Opera, Safari och IE9+. Med en stark önskan kan du göra en mer eller mindre cross-browser version, med början åtminstone med IE6.
Kontrollerade
- Internet Explorer 9+
- Opera
- Firefox
- Krom
- safari
Hjälp projektet
Sökrutan är förmodligen ett av de vanligaste användargränssnittselementen. När man arbetar med gränssnittets användbarhet är det väldigt vanligt att man vill lägga till ett snyggt sökfält. I den här handledningen kommer vi att skapa ett så populärt element med hjälp av pseudoelement.
HTML-uppmärkning
För att förbereda ett sådant fält kommer markeringen att vara minimal.
Detta använder den speciella HTML5-platshållaren och obligatoriska attribut:
- Platshållare- detta attribut ställer in utdata av text i fältet innan fältet får ingångsfokus, då döljs texten.
- nödvändig- detta attribut sätter ett obligatoriskt villkor för närvaron av information i inmatningsfältet innan formuläret skickas.
HTML5 har också en ny betydelse för typattributet: type="search" . Men det stöds inte bra i webbläsare, så vi kommer inte att använda det för tillfället.
HTML-element som img och input har inget innehåll. Därför kommer ett pseudoelement som :before inte att visa några pilar för knappen.
Lösningen på detta problem i vårt fall är att använda knappen type="submit" istället för input type="submit" . Så vi behåller formuläret med ENTER-tangenten.
css
Nedan är stilarna som krävs för vår demo:
Avbryt textbrytning
Cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )
Formelement
Webbläsarprefix visas inte i lektionskoden för bättre tydlighet. Du kan se hela koden i källtexten.
/* Styling av formulärbehållaren */ .form-wrapper ( bredd: 450px; utfyllnad: 15px; marginal: 150px auto 50px auto; bakgrund: #444; bakgrund: rgba(0,0,0,.2); border-radius : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) insatt, 0 1px 0 rgba(255,255,255,.2); ) /* Stil textinmatningsrutan */ .form-wrapper input ( bredd: 330px; höjd: 20px; utfyllnad: 10px 5px; float: vänster; teckensnitt: fetstil 15px "lucida sans", "trebuchet MS", "Tahoma"; kant: 0; bakgrund: #eee; border-radie: 3px 0 0 3px; ) .form-wrapper input:focus ( outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper input::- webkit -input-placeholder ( färg: #999; font-weight: normal; font-style: italic; ) .form-wrapper input:-moz-placeholder ( färg: #999; font-weight: normal; font-style: kursiv ; ) .form-wrapper input:-ms-input-placeholder ( färg: #999; font-weight: normal; font-style: italic; ) /* Knapp för att skicka formulär */ .form-wrapper-knapp ( overflow: synlig position: relativ; float:right; gräns: 0; stoppning: 0; markör: pekare; höjd: 40px; bredd: 110px teckensnitt: fet 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; färg: #fff; text-transform: versaler; bakgrund: #d83c3c; kantradie: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0,0, .3); ) .form-wrapper button:hover( bakgrund: #e54040; ) .form-wrapper button:active, .form-wrapper button:focus( bakgrund: #c42f2f; outline: 0; ) .form-wrapper button:before ( / * vänsterpil */ innehåll: ""; position: absolut; border-width: 8px 8px 8px 0; border-style: solid solid solid ingen; kant-färg: transparent #d83c3c transparent; topp: 12px; vänster: -6px; ) .form-wrapper button:hover:before( border-right-color: #e54040; ) .form-wrapper button:focus:before, .form-wrapper button:active:before( border-right-color: #c42f2f; ) .form-wrapper button::-moz-focus-inner ( /* Ta bort det extra utrymmet bredvid knappen i Mozilla Firefox */ border: 0; padding: 0; )
