Magandang search form sa css3. Pagdidisenyo ng Magagandang Form ng Paghahanap ng CSS3

Pinuna ako, sabi nila, ang pangit ng layout, pero may modernong HTML5 at CSS3.

Siyempre, naiintindihan ko, ang pinakabagong mga pamantayan ay cool at lahat ng iyon. Ngunit ang katotohanan ay ako, bilang isang panuntunan, ay gumagawa ng mga typesetting upang mag-order, at doon, sa karamihan ng mga kaso, ang kumpletong pagkakakilanlan sa iba't ibang mga browser ay mahalaga, na hindi pinapayagan ang paggamit ng mga pinakabagong teknolohiya. Samakatuwid, pangunahing nakatuon ako sa pagiging tugma sa cross-browser at, dahil sa nakagawian, binubuo ang form ng paghahanap "sa dating paraan."

Sa pangkalahatan, sa post na ito ay itinatama ko ang sitwasyon (para sa kapakanan ng mga hindi nasisiyahan sa huling artikulo =) at nag-aalok ng aking bersyon ng layout ng parehong form sa paghahanap, ngunit gumagamit ng HTML5 at CSS3 na mga teknolohiya.

Ang isang halimbawa ng kung ano ang mangyayari bilang isang resulta ay posible.

Ano ang mawawala sa atin kapag inilatag ang form na ito gamit ang HTML5 at CSS3

1. IE9 at mas mababa - ay hindi makikita ang default na text (placeholder attribute).
2. IE8 at sa ibaba - hindi makakakita ng mga bilugan na sulok at panloob na anino.
3. IE7 - kailangan mong tukuyin ang ibang lapad ng form para dito, dahil hindi nito sinusuportahan ang box-sizing property.
4. IE6 - ngunit hindi namin ito isinasaalang-alang sa lahat =)

Sa ibang mga modernong browser, maayos ang lahat. Naniniwala ako na ang mga pagkukulang sa itaas ay hindi kritikal, kaya para sa aking site ay matapang akong gumamit ng isang form na inilatag gamit ang pinakabagong mga teknolohiya.

HTML Code ng Form ng Paghahanap

Mukhang ganito:

Kung ikukumpara sa form mula sa nakaraang artikulo, ang mga sumusunod na pagbabago ay ginawa alinsunod sa teknolohiya ng HTML5:

1. Ang attribute na type="text" ay pinalitan ng type="search" .
2. Ang inline na script ay pinalitan ng placeholder="(!LANG:search" .!}

CSS code

Narito ang lahat ng kinakailangang istilo na may mga komento:

Maghanap ( /* itakda ang kinakailangang lapad ng form depende sa disenyo ** ang form ay umaabot nang walang problema */ lapad: 35%; /* ang submit button ay ganap na ilalagay, ** kaya kailangan ang property na ito */ posisyon: relative; ) .search input ( /* disable borders on inputs */ border: none; ) /* styles for the input field */ .search .input ( /* stretch the input field to the full width of the form */ width : 100%; /* dahil sa tuktok (8px) at ibaba (9px) padding ** ayusin ang taas ng form ** padding sa kanan (37px) higit sa kaliwa, ** dahil ang submit button ay magiging nakalagay doon */ padding: 8px 37px 9px 15px; /* para gawin ang lapad ng input field (100%) kasama ang inline na padding */ -moz-box-sizing: border-box; box-sizing: border-box; / * magdagdag ng mga inline na anino */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); /* round corners */ border-radius: 20px; background: #EEE; font: 13px Tahoma, Arial, sans-serif; kulay : #555; balangkas: wala; ) /* baguhin ang hitsura ng input field sa focus */ .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 ); background: #E8E8E8; color: #333; ) /* style ang submit button */ .search .submit ( /* iposisyon ang button mula sa kanang gilid ng form */ position: absolute; top: 0; kanan: 0; lapad: 37px; /* iunat ang button sa buong taas ng form */ taas: 100%; cursor: pointer; background: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% hindi na mauulit; /* magdagdag ng transparency sa submit button */ opacity: 0.5; ) /* baguhin ang transparency ng submit button sa hover */ .search .submit:hover ( opacity: 0.8; ) /* kailangan ang property na ito para ang mga browser ** Chrome at Safari ay makapag-istilo ng mga input */ input ( -webkit-appearance: none; )

At mga istilo para sa IE sa ibaba ng bersyon 9:

/* magtakda ng hiwalay na mga istilo para sa IE sa ibaba ng bersyon 9 */ *+html .search ( /* para sa IE7 ayusin ang lapad para sa iba pang mga browser at magdagdag ng isang kanang ** padding upang magkasya ang button na isumite sa lugar */ lapad: 28 %; padding : 0 52px 0 0; ) .search .input ( border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( border: 1px solid #CFCFCF; border-top: 1px solid #999; ) .search .submit ( filter: alpha(opacity=50); ) .search .submit:hover ( filter: alpha(opacity=80); )

P.S. Salamat sa mga kritiko para sa mga komento sa nakaraang artikulo! Salamat sa iyo, mayroon akong ilang mga bagong layout sandali sa aking ulo.

Dalawang opsyon para sa mga form sa paghahanap na nakakatipid ng espasyo sa iyong site. Kapag na-click, lumalawak ang form para sa text entry. Ginamit lang CSS3.

HTML

Simpleng anyo na may html5 tag:

css

Una, i-restart natin ang mga istilo para sa webkit mga browser na may posibilidad na magdagdag sa mga search engine input frame ng tag, icon ng isara. Samakatuwid, aalisin namin ang lahat ng labis na ito:

Input ( 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: none; /* alisin ang icon ng paghahanap at kanselahin */ )

Gumawa tayo ng form sa paghahanap:

Hindi namin tatalakayin ang lahat ng mga katangian, tandaan lamang na ang lapad ng input ng paghahanap ay unang may halaga 55px, at lalawak sa 130px sa sandali ng pagtutok :focus. Ari-arian paglipat nagbibigay-daan sa iyo na i-animate ang pagbabagong ito sa lapad. Ginagamit para sa glow anino ng kahon:

Input ( background: #ededed url(search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz- border-radius: 10em; border-radius: 10em; -webkit-transition: lahat ng .5s; -moz-transition: lahat ng .5s; transition: lahat ng .5s; ) input:focus ( width: 130px; background-color: # fff; kulay ng hangganan: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); )

AT demo 2 input ang field ng paghahanap ay mas compact - ang icon lamang ang ipapakita. Ang pag-click dito ay babaguhin din ang lapad ng input field.

#demo-b input ( width: 18px; padding-left: 10px; color: transparent; cursor: pointer; ) #demo-b input:hover ( background-color: #fff; ) #demo-b input:focus ( width : 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; )

At ang teksto ay ginawang transparent:

#demo-b input:-moz-placeholder ( color: transparent; ) #demo-b input::-webkit-input-placeholder ( color: transparent; )

Gumagana ang form sa lahat ng modernong browser Chrome, Firefox, safari, at IE8+.

Isa sa mga pinaka ginagamit na elemento ng anumang website ay ang search form. Kung gusto mong pagbutihin ang kakayahang magamit ng iyong site at gawing mas madaling mahanap ang iyong hinahanap, dapat kang maging seryoso sa pagdidisenyo ng isang form sa paghahanap.

Kaya, ngayon gusto naming sabihin sa iyo ang tungkol sa pagdidisenyo ng form sa paghahanap gamit ang mga katangian ng CSS3.

Malamang na nakahanap ka na ng mga tutorial sa pagdidisenyo ng isang form sa paghahanap ng CSS3 sa nakaraan, ngunit ngayon gusto naming mag-alok sa iyo ng isang bahagyang naiibang opsyon - isang form sa paghahanap na may 3D effect na ipinatupad gamit ang box-shadow na parameter.

markup

Sa ibaba makikita mo ang HTML code na ginamit upang bumuo ng form na ito. Pakitandaan na ang aming tagapuno ay binuo gamit ang HTML5, at ginamit namin ang lahat ng kinakailangang katangian.

Noong una gusto naming gamitin ang type="search" na ipinakilala sa HTML5, ngunit pagkatapos ay nagbago ang aming isip dahil sa hindi pagkakatugma sa maraming modernong browser. Ngayon ay kailangan nating magdagdag ng ilang dagdag na linya ng CSS code upang ma-overwrite ang mga orihinal na halaga.

Tingnan natin ang kaunting mga istilong ginamit upang lumikha ng magandang CSS3 na form sa paghahanap:

Form-wrapper (
lapad: 450px
padding: 8px
margin: 100px auto;
overflow: nakatago;
lapad ng hangganan: 1px;
border-style: solid
border-color: #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-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px
kulay ng background: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

Form-wrapper #search(
lapad: 330px
taas: 20px;
padding: 10px 5px;
lumutang pakaliwa;
font: bold 16px "lucida sans", "trebuchet MS", "Tahoma";
hangganan: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}

Form-wrapper #search:focus (
balangkas: 0;
kulay ng hangganan: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}

Form-wrapper #search::-webkit-input-placeholder (
kulay: #999;
font-weight: normal
}

Form-wrapper #search:-moz-placeholder (
kulay: #999;
font-weight: normal
}

Form-wrapper #search:-ms-input-placeholder (
kulay: #999;
font-weight: normal
}

Form-wrapper #submit (
float:right;
hangganan: 1px solid #00748f;
taas: 42px;
lapad: 100px
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
kulay: #fafafa;
text-transform: uppercase;
kulay ng background: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

Form-wrapper #submit:hover,
.form-wrapper #submit:focus (
kulay ng background: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}

Form-wrapper #submit:active (
balangkas: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

Form-wrapper #submit::-moz-focus-inner (
hangganan: 0;
}
Suporta sa browser

Sa ibaba makikita mo ang ilang mga screenshot na nagpapakita ng aming form sa paghahanap. Dapat mong mapansin na ito ay gumagana nang maayos kung ang pahina ay binuksan sa isang mas lumang bersyon ng browser. Nais ko ring idagdag na ang form sa paghahanap ng CSS3 na ito ay ganap na handa nang gamitin.

Mga modernong browser Chrome, Firefox, Safari, Opera, IE10:

Ang magandang balita ay sinusuportahan din ng IE10 ang HTML5 filler.

Mga legacy na bersyon ng IE (6/7/8):

Sa konklusyon

Kung nabasa mo na ang aming mga nakaraang artikulo, malamang na alam mo na dito kami ay bumubuo ng mga gumaganang application (may mga bersyon ng rollback at walang rollback) para sa lahat ng mga browser. At ang halimbawang ito ay walang pagbubukod.

Bilang karagdagan sa paggamit ng isang CSS3 form upang lumikha ng isang bloke sa paghahanap, madali mo itong maiangkop upang lumikha ng isang form ng pahintulot o isang form ng subscription.

Inilalarawan ng artikulo ang mga tampok ng layout ng form sa paghahanap ng site, nagbibigay ng isang halimbawa ng semantic code markup, disenyo ng CSS3, kasama ang isang maliit na jQuery magic sa dulo.

• markup

  Bago ang pagdating ng HTML5, ang form ng paghahanap ay ginawa sa isang regular na field ng teksto, sa unti-unting pagdating ng isang bagong bersyon ng markup language sa ating buhay, isang espesyal na uri ng field ng paghahanap ang lumitaw para dito. Kaya sa HTML ng isang modernong site, maaari tayong makakita ng ganito:

  Resulta ng code sa FF, Opera, IE9:

  At medyo naiiba sa mga browser batay sa webkit engine (Chrome, Safari):

  Search box sa webkit

  Tulad ng nakikita mo, kapag idinagdag ang pokus sa patlang, isang highlight ang idinagdag, at kapag nagpasok ka ng teksto, lilitaw ang isang malinaw na pindutan, kapag nag-click ka dito, ang mga nilalaman ng patlang ay tinanggal, na medyo maginhawa sa sarili nito.

  Kung walang CSS styling, ang aming form sa paghahanap ay mukhang medyo simple sa ngayon, sa artikulong ito susubukan naming gawin ang isang bagay tulad nito:

  
  Halimbawa: layout ng form sa paghahanap

  Maliban kung ang suporta para sa mas lumang mga browser ay binalak, isang walang laman na elementong hindi semantiko

  maaaring mapalitan ng pseudo-element:before .

  Mga tampok ng disenyo ng form sa paghahanap

  Dahil nagpasya akong gumamit ng maraming katangian ng CSS3, ang mga himalang ito ay hindi gagana sa mga lumang browser ng Internet Explorer, at upang makamit ang cross-browser compatibility, kailangan mong ikonekta ang mga saklay, gumawa ng isang bagay sa mga larawan, atbp.

  Una sa lahat, nais kong bigyang pansin ang ilang mga tampok, lalo na:

  • stylization sa mga webkit browser
  • pag-istilo ng placeholder

  Maghanap ng mga istilo ng form sa Chrome, Safari browser

  Magdagdag tayo ng ilang istilo sa field gamit ang .search class:

  Maghanap ( background: #d8e6ef; border: 1px solid #000; )

  Resulta ng screenshot:

  Maghanap sa FF, Opera, Chrome at Safari na mga browser

  Tulad ng nakasanayan sa mga browser, may nakakagulat at nalilito, sa Chrome ang hangganan sa paanuman ay gumagana nang kakaiba (lumilitaw ang mga margin, na parang nagtatakda kami ng padding), ganap na binabalewala ng Safari ang mga patakaran. Ngunit may solusyon sa sitwasyong ito, idinagdag namin ang panuntunang ito sa CSS code:

  Maghanap ( -webkit-appearance: none; )

  Ngayon ay maayos na ang lahat sa webkits, ngunit naiiba pa rin ang mga ito sa pag-highlight ng mga field sa default na focus at isang malinaw na button. Ang mga elementong ito, bagama't madalas na maginhawa, kung minsan ay maaaring masira ang ideya ng disenyo at kailangang i-disable. Ang pag-alis ng backlight ay napaka-simple:

  Search:focus ( outline: none; /* inalis focus highlight */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : inset 0 0 2px #000; box-shadow: inset 0 0 2px #000; /* nagdagdag ng inner-shadow bilang alternatibo para sa lahat ng browser */ )

  Ito ay nananatiling upang mapupuksa ang malinaw na pindutan. Sa katunayan, madali itong mai-istilo sa pamamagitan ng pagpapalit ng isang simpleng krus na may ilang uri ng background, nakaposisyon, atbp., ngunit sa aking halimbawa ay hindi ito kakailanganin:

  /* panuntunan lamang para sa elementong may class search */ .search::-webkit-search-cancel-button ( display: none; /* tinanggal ang clear button */ ) /* o lahat ng field na may uri ng paghahanap sa dokumento */ input : :-webkit-search-cancel-button ( display: wala; )

  Pag-format ng placeholder text tooltip

  Sa kasamaang palad, sa isang pahiwatig ng teksto, ang lahat ay medyo mas kumplikado kaysa sa tila sa unang tingin. Una, hindi ito gumagana sa IE9, hindi banggitin ang mga mas lumang browser, kaya ang JavaScript ay dapat gamitin sa mga kritikal na lugar kung saan ang ilang teksto sa field ay kinakailangan sa simula. Pangalawa, ang placeholder ay hindi nagpapahiram ng sarili sa disenyo sa Firefox, Chrome, Safari na mga browser at hindi ipinahiram ang sarili nito sa Opera:

  :-moz-placeholder ( kulay: #304e62; /* binago ang kulay sa FF */ ) ::-webkit-input-placeholder ( kulay: #304e62; /* binago ang kulay sa webkit */ )

  Pakitandaan na ang mga tagapili na ito ay hindi gagana kung sila ay nakalista na pinaghihiwalay ng mga kuwit, ang bawat isa ay dapat magsimula sa isang bagong linya.

  Isinasaalang-alang ko ang mga espesyal na sandali kung saan maaaring lumitaw ang mga paghihirap, ang iba ay hindi dapat magdulot ng mga problema para sa isang mas marami o mas kaunting karanasang taga-disenyo ng layout.

  mga script ng jQuery

  Sa wakas, magdagdag tayo ng ilang mga script sa aming form, katulad:

  • kanselahin natin ang kahilingan at magpakita ng mensahe ng error kapag nagpapadala ng walang laman na field
  • kapag tumututok sa field, magdagdag ng maliit na tooltip sa ibaba

  Napakadaling ipatupad ang lahat ng ito sa kapangyarihan ng jQ, nakuha ko ang sumusunod na code na may mga komento:

  $(function() ( /* handle form submission */ $(".search-form").submit(function() ( var errVal = "empty request"; /* Kung ang field ay walang laman o naglalaman ng errVal value */ if ($(".search").val() == "" || $(".search").val() == errVal) ( /* magdagdag ng errVal value sa field, baguhin ang kulay ng background at */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - hindi isinumite ang form */ return false; ); ) ); / * kapag ang field ay nakatutok */ $(".search").focus(function() ( /* set field value to empty, set background color to default */ $(this).val(""). css((backgroundColor : "#d8e6ef")); /* show tooltip */ $(".notice").fadeIn(400); )); /* kapag inalis ang focus */ $(".search"). blur(function( ) ( /* alisin ang tooltip */ $(".notice").fadeOut(400); )); ));

  Siyempre, pinakamahusay na palitan ang mga klase sa script ng mga identifier para sa mas mabilis na operasyon ng script, at kung ang iba pang mga elemento na may parehong mga klase ay lilitaw sa dokumento, hindi nila sisirain ang script.

  Mga resulta

  Kaya, kami ay nagdisenyo at nagprogram ng form sa paghahanap para sa site, ito ay gumagana sa pinakabagong bersyon ng Firefox, Chrome, Opera, Safari at IE9+. Sa matinding pagnanais, maaari kang gumawa ng mas marami o mas kaunting cross-browser na bersyon, simula man lang sa IE6.

  Sinuri

  • Internet Explorer 9+
  • Opera
  • Firefox
  • Chrome
  • safari

  Tulungan ang proyekto

Ang box para sa paghahanap ay marahil ang isa sa mga pinakakaraniwang elemento ng user interface. Kapag nagtatrabaho sa antas ng kakayahang magamit ng interface, karaniwan nang gustong magdagdag ng naka-istilong field ng paghahanap. Sa tutorial na ito, gagawa kami ng isang sikat na elemento gamit ang mga pseudo-element.

HTML markup

Upang maihanda ang gayong larangan, ang markup ay magiging minimal.

Ginagamit nito ang espesyal na placeholder ng HTML5 at mga kinakailangang katangian:

• placeholder- Itinatakda ng attribute na ito ang output ng text sa field bago matanggap ng field ang input focus, pagkatapos ay itatago ang text.
• kailangan- ang katangiang ito ay nagtatakda ng mandatoryong kundisyon para sa pagkakaroon ng impormasyon sa input field bago isumite ang form.

Ang HTML5 ay mayroon ding bagong kahulugan para sa type attribute: type="search" . Ngunit hindi ito mahusay na suportado sa mga browser, kaya hindi namin ito gagamitin sa ngayon.

Ang mga elemento ng HTML tulad ng img at input ay walang nilalaman. Samakatuwid, ang isang pseudo-element tulad ng :before ay hindi magpapakita ng anumang mga arrow para sa button.

Ang solusyon sa problemang ito sa aming kaso ay ang paggamit ng button type="submit" sa halip na input type="submit" . Kaya pinapanatili namin ang form gamit ang ENTER key.

css

Nasa ibaba ang mga istilong kinakailangan para sa aming demo:

Kanselahin ang text wrapping

Cf:noon, .cf:after( content:""; display:table; ) .cf:after( clear: both; ) .cf( zoom:1; )

Mga elemento ng form

Ang mga prefix ng browser ay hindi ipinapakita sa code ng aralin para sa mas mahusay na kalinawan. Makikita mo ang buong code sa source text.

/* Pag-istilo sa lalagyan ng form */ .form-wrapper ( width: 450px; padding: 15px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); ) /* Istilo ang text input box */ .form-wrapper input ( lapad : 330px; taas: 20px; padding: 10px 5px; float: left; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; border: 0; background: #eee; border-radius: 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 ( kulay: #999; font-weight: normal; font-style: italic; ) .form-wrapper input:-moz-placeholder ( color: #999; font-weight: normal; font-style: italic ; ) .form-wrapper input:-ms-input-placeholder ( color: #999; font-weight: normal; font-style: italic; ) /* Form submit button */ .form-wrapper button ( overflow: visible posisyon: kamag-anak; float:right; hangganan: 0; padding: 0; cursor: pointer; taas: 40px; lapad: 110px font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; kulay: #fff; text-transform: uppercase; background: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0,0, .3); ) .button ng form-wrapper:hover( background: #e54040; ) .button ng form-wrapper:aktibo, .button ng form-wrapper:focus( background: #c42f2f; outline: 0; ) .button ng form-wrapper:bago ( / * left arrow */ content: ""; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent #d83c3c transparent; top: 12px; left: -6px; ) .button ng form-wrapper: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 ( /* Alisin ang dagdag na espasyo sa tabi ng button sa Mozilla Firefox */ border: 0; padding: 0; )