Transcript
Page 1: 6 Css HTML Form Styles

6 CSS HTML Form Styles

Styling HTML forms with CSS is fun and there’s always something new to explore and learn, but don’t 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 I’ve created for your websites, you just have to copy the markup and CSS into your projects and have nice looking form.

Mark Up

Start 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.

 

12345678910111213141516

<form action="" method="post" class="STYLE-NAME">    <h1>Contact Form         <span>Please fill all the texts in the fields.</span>    </h1>    <label>        <span>Your Name :</span>      <input id="name" type="text" name="name" placeholder="Your Full Name" />    </label>        <label>        <span>Your Email :</span>      <input id="email" type="email" name="email" placeholder="Valid Email Address" />    </label>        <label>        <span>Message :</span>      <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>

Page 2: 6 Css HTML Form Styles

17181920212223242526272829

    </label>      <label>        <span>Subject :</span><select name="selection">        <option value="Job Inquiry">Job Inquiry</option>        <option value="General Question">General Question</option>        </select>    </label>         <label>        <span>&nbsp;</span>         <input type="button" class="button" value="Send" />     </label>    </form>

Basic Grey

The 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.

Page 3: 6 Css HTML Form Styles

 

123456789

10111213141516171819

/* Basic Grey */.basic-grey {    width: 400px;    margin-right: auto;    margin-left: auto;    background: #EEE;    padding: 20px 30px 20px 30px;    font: 12px Georgia, "Times New Roman", Times, serif;    color: #888;    text-shadow: 1px 1px 1px #FFF;    border:1px solid #DADADA;}.basic-grey h1 {    font: 25px Georgia, "Times New Roman", Times, serif;    padding: 0px 0px 10px 40px;    display: block;    border-bottom: 1px solid #DADADA;    margin: -10px -30px 30px -30px;    color: #888;

Page 4: 6 Css HTML Form Styles

2021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

}.basic-grey h1>span {    display: block;    font-size: 11px;}.basic-grey label {    display: block;    margin: 0px 0px 5px;}.basic-grey label>span {    float: left;    width: 80px;    text-align: right;    padding-right: 10px;    margin-top: 10px;    color: #888;}.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea,.basic-grey select{    border: 1px solid #DADADA;    color: #888;    height: 24px;    margin-bottom: 16px;    margin-right: 6px;    margin-top: 2px;    outline: 0 none;    padding: 3px 3px 3px 5px;    width: 70%;    font: normal 12px/12px Georgia, "Times New Roman", Times, serif;}.basic-grey select {    background: #FFF url('down-arrow.png') no-repeat right;    background: #FFF url('down-arrow.png') no-repeat right);    appearance:none;    -webkit-appearance:none;     -moz-appearance: none;    text-indent: 0.01px;    text-overflow: '';    width: 72%;    height: 30px;}.basic-grey textarea{    height:100px;}.basic-grey .button {    background: #E48F8F;

Page 5: 6 Css HTML Form Styles

6768697071

    border: none;    padding: 10px 25px 10px 25px;    color: #FFF;}.basic-grey .button:hover {    background: #CF7A7A}

Elegant Aero

Nice 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.

 

1 /* Elegant Aero */

Page 6: 6 Css HTML Form Styles

23456789

101112131415161718192021222324252627282930313233343536373839404142434445464748

.elegant-aero {    width: 400px;    margin-right: auto;    margin-left: auto;    background: #DDF0F8;    padding: 30px 30px 20px 30px;    box-shadow: #868686 0 0px 10px -1px;    -webkit-box-shadow: #868686 0 0px 10px -1px;    font: 12px Arial, Helvetica, sans-serif;    color: #666;}.elegant-aero  h1{    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;    padding: 20px 10px 20px 30px;    display: block;    background: #D0E6F0;    margin-top: -30px;    margin-left: -30px;    margin-right: -30px;    border-bottom: 1px solid #B9E1F1;}.elegant-aero h1>span {    display: block;    font-size: 11px;}

.elegant-aero label>span {    float: left;    margin-top: 10px;    color: #5E5E5E;}.elegant-aero label {    display: block;    margin: 0px 0px 5px;}.elegant-aero label>span {    float: left;    width: 100px;    text-align: left;    padding-right: 10px;    margin-top: 10px;    font-weight: bold;}.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {    color: #888;

Page 7: 6 Css HTML Form Styles

4950515253545556575859606162636465666768697071727374757677787980

    width: 65%;    padding: 5px 4px 0px 5px;    margin-top: 2px;    margin-right: 6px;    margin-bottom: 16px;    border: 1px solid #CEE2E7;    background: #FBFBFB;    outline: 0;    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);    font: 200 24px/24px Arial, Helvetica, sans-serif;}.elegant-aero textarea{    height:100px;}.elegant-aero select {    background: #fbfbfb url('down-arrow.png') no-repeat right;    background: #fbfbfb url('down-arrow.png') no-repeat right;   appearance:none;    -webkit-appearance:none;    -moz-appearance: none;    text-indent: 0.01px;    text-overflow: '';    width: 67%;}.elegant-aero .button{    padding: 10px 30px 10px 30px;    background: #66C1E4;    border: none;    color: #FFF;}.elegant-aero .button:hover{    background: #3EB1DD;}

Smart Green

Smart 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.

Page 8: 6 Css HTML Form Styles

 

123456789

10111213141516171819

/*######## Smart Green ########*/.smart-green {    width: 400px;    margin-right: auto;    margin-left: auto;    background: #FFF;    padding: 30px 30px 20px 30px;    box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -1px;    -webkit-box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -1px;    font: 12px Arial, Helvetica, sans-serif;    color: #666;    border-radius: 5px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;}.smart-green h1 {    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;    padding: 20px 0px 20px 40px;

Page 9: 6 Css HTML Form Styles

2021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

    display: block;    margin: -30px -30px 10px -30px;    color: #FFF;    background: #9DC45F;    text-shadow: 1px 1px 1px #949494;    border-radius: 5px 5px 0px 0px;    -webkit-border-radius: 5px 5px 0px 0px;    -moz-border-radius: 5px 5px 0px 0px;    border-bottom:1px solid #89AF4C;

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

.smart-green label {    display: block;    margin: 0px 0px 5px;}.smart-green label>span {    float: left;    margin-top: 10px;    color: #5E5E5E;}.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {    color: #555;    height:24px;    width: 96%;    padding: 3px 3px 3px 10px;    margin-top: 2px;    margin-bottom: 16px;    border: 1px solid #E5E5E5;    background: #FBFBFB;    outline: 0;    -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);    box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);    font: normal 14px/14px Arial, Helvetica, sans-serif;}.smart-green textarea{    height:100px;    padding-top: 10px;}.smart-green select {

Page 10: 6 Css HTML Form Styles

6768697071727374757677787980818283848586

    background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);    background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, 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: 10px 25px 10px 25px;    color: #FFF;    text-shadow: 1px 1px 1px #949494;}.smart-green .button:hover {    background-color:#80A24A;}

White Pink

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

Page 11: 6 Css HTML Form Styles

 

1234567891011121314

/* ###### White / Pink #########*/.white-pink {    width: 400px;    margin-right: auto;    margin-left: auto;    background: #FFF;    padding:30px 30px 20px 30px;    box-shadow:rgba(122, 122, 122, 0.7) 0 3px 10px -1px;    -webkit-box-shadow:rgba(122, 122, 122, 0.7) 0 3px 10px -1px;    font: 12px Arial, Helvetica, sans-serif;    color: #666;}.white-pink h1 {    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;    padding: 0px 0px 10px 40px;    display: block;    border-bottom: 1px solid #F5F5F5;    margin: -10px -30px 10px -30px;

Page 12: 6 Css HTML Form Styles

15161718192021222324252627282930313233343536373

    color: #969696;}.white-pink h1>span {    display: block;    font-size: 11px;    color: #C4C2C2;}.white-pink label {    display: block;    margin: 0px 0px 5px;}.white-pink label>span {    float: left;    width: 80px;    text-align: right;    padding-right: 10px;    margin-top: 10px;    color: #969696;}.white-pink input[type="text"], .white-pink input[type="email"], .white-pink textarea,.white-pink select{    color: #555;    width: 65%;    padding: 3px 3px 3px 8px;    margin-top: 2px;    margin-right: 6px;    margin-bottom: 16px;    border: 1px solid #e5e5e5;    background: #fbfbfb;    outline: 0;    -webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);    box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);    font: normal 12px/24px Arial, Helvetica, sans-serif;}.white-pink textarea{    height:100px;}.white-pink .button {    -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;    -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;    box-shadow:inset 0px 1px 0px 0px #fbafe3;    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );    background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );

Page 13: 6 Css HTML Form Styles

83940414243444546474849505152535455565758596061

    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:1px solid #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:1px 1px 0px #c70067;}.white-pink .button:hover {    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );    background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');    background-color:#ef027d;}.white-pink .button:active {    position:relative;    top:1px;}.white-pink select {    background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);    background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));   appearance:none;    -webkit-appearance:none;    -moz-appearance: none;    text-indent: 0.01px;    text-overflow: '';

Page 14: 6 Css HTML Form Styles

62636465666768697071727374757677787980818283848

    width: 67%;}

Page 15: 6 Css HTML Form Styles

58687888990919293949596979899

Bootstrap Style Form

Bootstrap style form, that works well with white background. You can use this style as base to make different

Page 16: 6 Css HTML Form Styles

looking from in different colors.

 

123456789

10111213141516

/* #### bootstrap Form #### */.bootstrap-frm {    width: 400px;    margin-right: auto;    margin-left: auto;    background: #FFF;    padding: 20px 30px 20px 30px;    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;    color: #888;    text-shadow: 1px 1px 1px #FFF;    border:1px solid #DDD;    border-radius: 5px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;}.bootstrap-frm h1 {

Page 17: 6 Css HTML Form Styles

1718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263

    font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;    padding: 0px 0px 10px 40px;    display: block;    border-bottom: 1px solid #DADADA;    margin: -10px -30px 30px -30px;    color: #888;}.bootstrap-frm h1>span {    display: block;    font-size: 11px;}.bootstrap-frm label {    display: block;    margin: 0px 0px 5px;}.bootstrap-frm label>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-frm input[type="text"], .bootstrap-frm input[type="email"], .bootstrap-frm textarea, .bootstrap-frm select{    border: 1px solid #CCC;    color: #888;    height: 20px;    margin-bottom: 16px;    margin-right: 6px;    margin-top: 2px;    outline: 0 none;    padding: 6px 12px;    width: 68%;    border-radius: 4px;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    font: normal 14px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}

Page 18: 6 Css HTML Form Styles

64656667686970717273747576777879808182838485

.bootstrap-frm select {    background: #FFF url('down-arrow.png') no-repeat right;    background: #FFF url('down-arrow.png') no-repeat right);    appearance:none;    -webkit-appearance:none;     -moz-appearance: none;    text-indent: 0.01px;    text-overflow: '';    width: 72%;    height: 30px;}.bootstrap-frm textarea{    height:100px;}.bootstrap-frm .button {    background: #FFF;    border: 1px solid #CCC;    padding: 10px 25px 10px 25px;    color: #333;    border-radius: 4px;}.bootstrap-frm .button:hover {    color: #333;    background-color: #EBEBEB;    border-color: #ADADAD;}

Dark Matter

If 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.

Page 19: 6 Css HTML Form Styles

 

123456789

10111213141516171819

/* #### Dark Matter #### */.dark-matter {    width: 400px;    margin-right: auto;    margin-left: auto;    background: #333;    padding: 20px 30px 20px 30px;    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;    color: #888;    text-shadow: 1px 1px 1px #000;    border:none;    border-radius: 5px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;}.dark-matter h1 {    font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;    padding: 0px 0px 10px 40px;    display: block;

Page 20: 6 Css HTML Form Styles

2021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

    border-bottom: 1px solid #444;    margin: -10px -30px 30px -30px;    color: #FFF;}.dark-matter h1>span {    display: block;    font-size: 11px;}.dark-matter label {    display: block;    margin: 0px 0px 5px;}.dark-matter label>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-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select{    border: none;    color: #4B4B4B;    height: 20px;    margin-bottom: 16px;    margin-right: 6px;    margin-top: 2px;    outline: 0 none;    padding: 6px 12px;    width: 68%;    border-radius: 4px;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    font: normal 14px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}.dark-matter select {    background: #FFF url('down-arrow.png') no-repeat right;    background: #FFF url('down-arrow.png') no-repeat right);    appearance:none;

Page 21: 6 Css HTML Form Styles

676869707172737475767778798081828384

    -webkit-appearance:none;     -moz-appearance: none;    text-indent: 0.01px;    text-overflow: '';    width: 72%;    height: 30px;}.dark-matter textarea{    height:100px;}.dark-matter .button {    background: #FFF;    border: none;    padding: 10px 25px 10px 25px;    color: #333;    border-radius: 4px;}.dark-matter .button:hover {    color: #333;    background-color: #EBEBEB;}

Conclusion

I 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.


Top Related