6 Css HTML Form Styles

Download 6 Css HTML Form Styles

Post on 27-Dec-2015

22 views

Category:

Documents

0 download

DESCRIPTION

OK

TRANSCRIPT

6 CSS HTML Form StylesStyling HTML forms with CSS is fun and theres always something new to explore and learn, but dont you feel dull when you do it over and over again? Sometimes I do, I too hate to start from scratch, I rather use something that already looks good and works. So here are few CSS from styles Ive created for your websites, you just have to copy the markup and CSS into your projects and have nice looking form.

Mark UpStart by dropping HTML Form syntax in your project. Most common form contains name, email, message field and submit button. Just change the class name of the form to use different CSS styles.1234567891011121314151617181920212223242526272829 Contact Form Please fill all the texts in the fields. Your Name : Your Email : Message : Subject : Job Inquiry General Question

Basic GreyThe CSS below will transform your form into simple looking form, it comes with regular form alignment and grey background, a perfect base to start and further refining.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071/* Basic Grey */.basic-grey{ width:400px; margin-right:auto; margin-left:auto; background:#EEE; padding:20px30px20px30px; font:12pxGeorgia,"Times New Roman",Times,serif; color:#888; text-shadow:1px1px1px#FFF; border:1pxsolid#DADADA;}.basic-greyh1{ font:25pxGeorgia,"Times New Roman",Times,serif; padding:0px0px10px40px; display:block; border-bottom:1pxsolid#DADADA; margin:-10px-30px30px-30px; color:#888;}.basic-greyh1>span{ display:block; font-size:11px;}.basic-greylabel{ display:block; margin:0px0px5px;}.basic-greylabel>span{ float:left; width:80px; text-align:right; padding-right:10px; margin-top:10px; color:#888;}.basic-greyinput[type="text"],.basic-greyinput[type="email"],.basic-greytextarea,.basic-greyselect{ border:1pxsolid#DADADA; color:#888; height:24px; margin-bottom:16px; margin-right:6px; margin-top:2px; outline:0none; padding:3px3px3px5px; width:70%; font:normal12px/12pxGeorgia,"Times New Roman",Times,serif;}.basic-greyselect{ background:#FFFurl('down-arrow.png')no-repeatright; background:#FFFurl('down-arrow.png')no-repeatright); appearance:none; -webkit-appearance:none; -moz-appearance:none; text-indent:0.01px; text-overflow:''; width:72%; height:30px;}.basic-greytextarea{ height:100px;}.basic-grey.button{ background:#E48F8F; border:none; padding:10px25px10px25px; color:#FFF;}.basic-grey.button:hover{ background:#CF7A7A}

Elegant AeroNice light blue CSS form, it comes to life in similar color background. Copy CSS below in your project, change the class name of the form to elegant-aero to achieve this elegant form.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980/* Elegant Aero */.elegant-aero{ width:400px; margin-right:auto; margin-left:auto; background:#DDF0F8; padding:30px30px20px30px; box-shadow:#86868600px10px-1px; -webkit-box-shadow:#86868600px10px-1px; font:12pxArial,Helvetica,sans-serif; color:#666;}.elegant-aeroh1{ font:24px"Trebuchet MS",Arial,Helvetica,sans-serif; padding:20px10px20px30px; display:block; background:#D0E6F0; margin-top:-30px; margin-left:-30px; margin-right:-30px; border-bottom:1pxsolid#B9E1F1;}.elegant-aeroh1>span{ display:block; font-size:11px;}

.elegant-aerolabel>span{ float:left; margin-top:10px; color:#5E5E5E;}.elegant-aerolabel{ display:block; margin:0px0px5px;}.elegant-aerolabel>span{ float:left; width:100px; text-align:left; padding-right:10px; margin-top:10px; font-weight:bold;}.elegant-aeroinput[type="text"],.elegant-aeroinput[type="email"],.elegant-aerotextarea,.elegant-aeroselect{ color:#888; width:65%; padding:5px4px0px5px; margin-top:2px; margin-right:6px; margin-bottom:16px; border:1pxsolid#CEE2E7; background:#FBFBFB; outline:0; -webkit-box-shadow:inset1px1px2pxrgba(200,200,200,0.2); box-shadow:inset1px1px2pxrgba(200,200,200,0.2); font:20024px/24pxArial,Helvetica,sans-serif;}.elegant-aerotextarea{ height:100px;}.elegant-aeroselect{ background:#fbfbfburl('down-arrow.png')no-repeatright; background:#fbfbfburl('down-arrow.png')no-repeatright; appearance:none; -webkit-appearance:none; -moz-appearance:none; text-indent:0.01px; text-overflow:''; width:67%;}.elegant-aero.button{ padding:10px30px10px30px; background:#66C1E4; border:none; color:#FFF;}.elegant-aero.button:hover{ background:#3EB1DD;}

Smart GreenSmart green is perfect for soft green backgrounds. Copy CSS below in your project, change the class name of the form to smart-green to achieve this stylish form.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586/*######## Smart Green ########*/.smart-green{ width:400px; margin-right:auto; margin-left:auto; background:#FFF; padding:30px30px20px30px; box-shadow:rgba(194,194,194,0.7)03px10px-1px; -webkit-box-shadow:rgba(194,194,194,0.7)03px10px-1px; font:12pxArial,Helvetica,sans-serif; color:#666; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}.smart-greenh1{ font:24px"Trebuchet MS",Arial,Helvetica,sans-serif; padding:20px0px20px40px; display:block; margin:-30px-30px10px-30px; color:#FFF; background:#9DC45F; text-shadow:1px1px1px#949494; border-radius:5px5px0px0px; -webkit-border-radius:5px5px0px0px; -moz-border-radius:5px5px0px0px; border-bottom:1pxsolid#89AF4C;

}.smart-greenh1>span{ display:block; font-size:11px; color:#FFF;}

.smart-greenlabel{ display:block; margin:0px0px5px;}.smart-greenlabel>span{ float:left; margin-top:10px; color:#5E5E5E;}.smart-greeninput[type="text"],.smart-greeninput[type="email"],.smart-greentextarea,.smart-greenselect{ color:#555; height:24px; width:96%; padding:3px3px3px10px; margin-top:2px; margin-bottom:16px; border:1pxsolid#E5E5E5; background:#FBFBFB; outline:0; -webkit-box-shadow:inset1px1px2pxrgba(238,238,238,0.2); box-shadow:inset1px1px2pxrgba(238,238,238,0.2); font:normal14px/14pxArial,Helvetica,sans-serif;}.smart-greentextarea{ height:100px; padding-top:10px;}.smart-greenselect{ background:url('down-arrow.png')no-repeatright,-moz-linear-gradient(top,#FBFBFB0%,#E9E9E9100%); background:url('down-arrow.png')no-repeatright,-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#FBFBFB),color-stop(100%,#E9E9E9)); appearance:none; -webkit-appearance:none; -moz-appearance:none; text-indent:0.01px; text-overflow:''; width:100%; height:30px;}.smart-green.button{ background-color:#9DC45F; border-radius:5px; -webkit-border-radius:5px; -moz-border-border-radius:5px; border:none; padding:10px25px10px25px; color:#FFF; text-shadow:1px1px1px#949494;}.smart-green.button:hover{ background-color:#80A24A;}

White PinkAnother style for form, that utilizes the modern CSS box shadows to achieve elegant looking form that comes with pink button style.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899/* ###### White / Pink #########*/.white-pink{ width:400px; margin-right:auto; margin-left:auto; background:#FFF; padding:30px30px20px30px; box-shadow:rgba(122,122,122,0.7)03px10px-1px; -webkit-box-shadow:rgba(122,122,122,0.7)03px10px-1px; font:12pxArial,Helvetica,sans-serif; color:#666;}.white-pinkh1{ font:24px"Trebuchet MS",Arial,Helvetica,sans-serif; padding:0px0px10px40px; display:block; border-bottom:1pxsolid#F5F5F5; margin:-10px-30px10px-30px; color:#969696;}.white-pinkh1>span{ display:block; font-size:11px; color:#C4C2C2;}.white-pinklabel{ display:block; margin:0px0px5px;}.white-pinklabel>span{ float:left; width:80px; text-align:right; padding-right:10px; margin-top:10px; color:#969696;}.white-pinkinput[type="text"],.white-pinkinput[type="email"],.white-pinktextarea,.white-pinkselect{ color:#555; width:65%; padding:3px3px3px8px; margin-top:2px; margin-right:6px; margin-bottom:16px; border:1pxsolid#e5e5e5; background:#fbfbfb; outline:0; -webkit-box-shadow:inset1px1px2pxrgba(200,200,200,0.2); box-shadow:inset1px1px2pxrgba(200,200,200,0.2); font:normal12px/24pxArial,Helvetica,sans-serif;}.white-pinktextarea{ height:100px;}.white-pink.button{ -moz-box-shadow:inset0px1px0px0px#fbafe3; -webkit-box-shadow:inset0px1px0px0px#fbafe3; box-shadow:inset0px1px0px0px#fbafe3; background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ff5bb0),color-stop(1,#ef027d)); background:-moz-linear-gradient(centertop,#ff5bb05%,#ef027d100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0',endColorstr='#ef027d'); background-color:#ff5bb0; border-radius:9px; -webkit-border-radius:9px; -moz-border-border-radius:9px; border:1pxsolid#ee1eb5; display:inline-block; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; height:30px; line-height:28px; width:100px; text-decoration:none; text-align:center; text-shadow:1px1px0px#c70067;}.white-pink.button:hover{ background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ef027d),color-stop(1,#ff5bb0)); background:-moz-linear-gradient(centertop,#ef027d5%,#ff5bb0100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d',endColorstr='#ff5bb0'); background-color:#ef027d;}.white-pink.button:active{ position:relative; top:1px;}.white-pinkselect{ background:url('down-arrow.png')no-repeatright,-moz-linear-gradient(top,#FBFBFB0%,#E9E9E9100%); background:url('down-arrow.png')no-repeatright,-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#FBFBFB),color-stop(100%,#E9E9E9)); appearance:none; -webkit-appearance:none; -moz-appearance:none; text-indent:0.01px; text-overflow:''; width:67%;}

Bootstrap Style FormBootstrap style form, that works well with white background. You can use this style as base to make different looking from in different colors.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485/* #### bootstrap Form #### */.bootstrap-frm{ width:400px; margin-right:auto; margin-left:auto; background:#FFF; padding:20px30px20px30px; font:12px"Helvetica Neue",Helvetica,Arial,sans-serif; color:#888; text-shadow:1px1px1px#FFF; border:1pxsolid#DDD; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}.bootstrap-frmh1{ font:25px"Helvetica Neue",Helvetica,Arial,sans-serif; padding:0px0px10px40px; display:block; border-bottom:1pxsolid#DADADA; margin:-10px-30px30px-30px; color:#888;}.bootstrap-frmh1>span{ display:block; font-size:11px;}.bootstrap-frmlabel{ display:block; margin:0px0px5px;}.bootstrap-frmlabel>span{ float:left; width:80px; text-align:right; padding-right:10px; margin-top:10px; color:#333; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:bold;}.bootstrap-frminput[type="text"],.bootstrap-frminput[type="email"],.bootstrap-frmtextarea,.bootstrap-frmselect{ border:1pxsolid#CCC; color:#888; height:20px; margin-bottom:16px; margin-right:6px; margin-top:2px; outline:0none; padding:6px12px; width:68%; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; font:normal14px/14px"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-box-shadow:inset01px1pxrgba(0,0,0,0.075); box-shadow:inset01px1pxrgba(0,0,0,0.075); -moz-box-shadow:inset01px1pxrgba(0,0,0,0.075);}.bootstrap-frmselect{ background:#FFFurl('down-arrow.png')no-repeatright; background:#FFFurl('down-arrow.png')no-repeatright); appearance:none; -webkit-appearance:none; -moz-appearance:none; text-indent:0.01px; text-overflow:''; width:72%; height:30px;}.bootstrap-frmtextarea{ height:100px;}.bootstrap-frm.button{ background:#FFF; border:1pxsolid#CCC; padding:10px25px10px25px; color:#333; border-radius:4px;}.bootstrap-frm.button:hover{ color:#333; background-color:#EBEBEB; border-color:#ADADAD;}

Dark MatterIf your website is based on dark theme, you can use this form style to fit your base color. All text are white and background is dark, which can be changed to any other color of your choice.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384/* #### Dark Matter #### */.dark-matter{ width:400px; margin-right:auto; margin-left:auto; background:#333; padding:20px30px20px30px; font:12px"Helvetica Neue",Helvetica,Arial,sans-serif; color:#888; text-shadow:1px1px1px#000; border:none; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}.dark-matterh1{ font:25px"Helvetica Neue",Helvetica,Arial,sans-serif; padding:0px0px10px40px; display:block; border-bottom:1pxsolid#444; margin:-10px-30px30px-30px; color:#FFF;}.dark-matterh1>span{ display:block; font-size:11px;}.dark-matterlabel{ display:block; margin:0px0px5px;}.dark-matterlabel>span{ float:left; width:80px; text-align:right; padding-right:10px; margin-top:10px; color:#FFF; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:bold;}.dark-matterinput[type="text"],.dark-matterinput[type="email"],.dark-mattertextarea,.dark-matterselect{ border:none; color:#4B4B4B; height:20px; margin-bottom:16px; margin-right:6px; margin-top:2px; outline:0none; padding:6px12px; width:68%; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; font:normal14px/14px"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-box-shadow:inset01px1pxrgba(0,0,0,0.075); box-shadow:inset01px1pxrgba(0,0,0,0.075); -moz-box-shadow:inset01px1pxrgba(0,0,0,0.075);}.dark-matterselect{ background:#FFFurl('down-arrow.png')no-repeatright; background:#FFFurl('down-arrow.png')no-repeatright); appearance:none; -webkit-appearance:none; -moz-appearance:none; text-indent:0.01px; text-overflow:''; width:72%; height:30px;}.dark-mattertextarea{ height:100px;}.dark-matter.button{ background:#FFF; border:none; padding:10px25px10px25px; color:#333; border-radius:4px;}.dark-matter.button:hover{ color:#333; background-color:#EBEBEB;}

ConclusionI have not tested these forms in some old browsers, but it should work fine with all modern browsers. I have also ignored some other input fields such as radio, checkboxs and file fields. I hope you can use these CSS as your base to improve on those elements.

Recommended

View more >