首页 > 代码库 > 6款漂亮HTML CSS样式用户留言表单

6款漂亮HTML CSS样式用户留言表单

<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>
</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 */
.basic-grey {
margin-left:auto;
margin-right:auto;
max-width500px;
background#F7F7F7;
padding25px 15px 25px 10px;
font12px Georgia"Times New Roman", Timesserif;
color#888;
text-shadow1px 1px 1px #FFF;
border:1px solid #E4E4E4;
}
.basic-grey h1 {
font-size25px;
padding0px 0px 10px 40px;
displayblock;
border-bottom:1px solid #E4E4E4;
margin-10px -15px 30px -10px;;
color#888;
}
.basic-grey h1>span {
displayblock;
font-size11px;
}
.basic-grey label {
displayblock;
margin0px;
}
.basic-grey label>span {
floatleft;
width20%;
text-alignright;
padding-right10px;
margin-top10px;
color#888;
}
.basic-grey input[type="text"].basic-grey input[type="email"].basic-grey textarea.basic-greyselect {
border1px solid #DADADA;
color#888;
height30px;
margin-bottom16px;
margin-right6px;
margin-top2px;
outlinenone;
padding3px 3px 3px 5px;
width70%;
font-size12px;
line-height:15px;
box-shadowinset 0px 1px 4px #ECECEC;
-moz-box-shadowinset 0px 1px 4px #ECECEC;
-webkit-box-shadowinset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding5px 3px 3px 5px;
}
.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-appearancenone;
text-indent0.01px;
text-overflow‘‘;
width70%;
height35px;
line-height25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey .button {
background#E27575;
bordernone;
padding10px 25px 10px 25px;
color#FFF;
box-shadow1px 1px 5px #B6B6B6;
border-radius3px;
text-shadow1px 1px 1px #9E3F3F;
cursorpointer;
}
.basic-grey .button:hover {
background#CF7A7A
}
第二、优雅的Aero样式
技术分享
样式:
.elegant-aero {
margin-left:auto;
margin-right:auto;

 

max-width500px;
background#D2E9FF;
padding20px 20px 20px 20px;
font12px Arial, Helveticasans-serif;
color#666;
}
.elegant-aero h1 {
font24px "Trebuchet MS", Arial, Helveticasans-serif;
padding10px 10px 10px 20px;
displayblock;
background#C0E1FF;
border-bottom1px solid #B8DDFF;
margin-20px -20px 15px;
}
.elegant-aero h1>span {
displayblock;
font-size11px;
}

.elegant-aero label>span {
floatleft;
margin-top10px;
color#5E5E5E;
}
.elegant-aero label {
displayblock;
margin0px 0px 5px;
}
.elegant-aero label>span {
floatleft;
width20%;
text-alignright;
padding-right15px;
margin-top10px;
font-weightbold;
}
.elegant-aero input[type="text"].elegant-aero input[type="email"].elegant-aerotextarea.elegant-aero select {
color#888;
width70%;
padding0px 0px 0px 5px;
border1px solid #C5E2FF;
background#FBFBFB;
outline0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadowinset 0px 1px 6px #ECF3F5;
font200 12px/25px Arial, Helveticasans-serif;
height30px;
line-height:15px;
margin2px 6px 16px 0px;
}
.elegant-aero textarea{
height:100px;
padding5px 0px 0px 5px;
width70%;
}
.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-appearancenone;
text-indent0.01px;
text-overflow‘‘;
width70%;
}
.elegant-aero .button{
padding10px 30px 10px 30px;
background#66C1E4;
bordernone;
color#FFF;
box-shadow1px 1px 1px #4C6E91;
-webkit-box-shadow1px 1px 1px #4C6E91;
-moz-box-shadow1px 1px 1px #4C6E91;
text-shadow1px 1px 1px #5079A3;

}
.elegant-aero .button:hover{
background#3EB1DD;
}

第三、简单绿色
技术分享
样式:
.smart-green {
margin-left:auto;
margin-right:auto;

 

max-width500px;
background#F8F8F8;
padding30px 30px 20px 30px;
font12px Arial, Helveticasans-serif;
color#666;
border-radius5px;
-webkit-border-radius5px;
-moz-border-radius5px;
}
.smart-green h1 {
font24px "Trebuchet MS", Arial, Helveticasans-serif;
padding20px 0px 20px 40px;
displayblock;
margin-30px -30px 10px -30px;
color#FFF;
background#9DC45F;
text-shadow1px 1px 1px #949494;
border-radius5px 5px 0px 0px;
-webkit-border-radius5px 5px 0px 0px;
-moz-border-radius5px 5px 0px 0px;
border-bottom:1px solid #89AF4C;

}
.smart-green h1>span {
displayblock;
font-size11px;
color#FFF;
}

.smart-green label {
displayblock;
margin0px 0px 5px;
}
.smart-green label>span {
floatleft;
margin-top10px;
color#5E5E5E;
}
.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea,.smart-green select {
color#555;
height30px;
line-height:15px;
width100%;
padding0px 0px 0px 10px;
margin-top2px;
border1px solid #E5E5E5;
background#FBFBFB;
outline0;
-webkit-box-shadowinset 1px 1px 2px rgba(2382382380.2);
box-shadowinset 1px 1px 2px rgba(2382382380.2);
fontnormal 14px/14px Arial, Helveticasans-serif;
}
.smart-green textarea{
height:100px;
padding-top10px;
}
.smart-green select {
backgroundurl(‘down-arrow.png‘no-repeat right, -moz-linear-gradient(top#FBFBFB0%#E9E9E9 100%);
backgroundurl(‘down-arrow.png‘no-repeat right, -webkit-gradient(linearleft topleftbottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
appearance:none;
-webkit-appearance:none;
-moz-appearancenone;
text-indent0.01px;
text-overflow‘‘;
width:100%;
height:30px;
}
.smart-green .button {
background-color#9DC45F;
border-radius5px;
-webkit-border-radius5px;
-moz-border-border-radius5px;
bordernone;
padding10px 25px 10px 25px;
color#FFF;
text-shadow1px 1px 1px #949494;
}
.smart-green .button:hover {
background-color:#80A24A;
}

第四、白色样式
技术分享
样式:
.white-pink {
margin-left:auto;
margin-right:auto;

 

max-width500px;
background#FFF;
padding30px 30px 20px 30px;
box-shadow: rgba(18718718710px 20px -1px;
-webkit-box-shadow: rgba(18718718710px 20px -1px;
font12px Arial, Helveticasans-serif;
color#666;
border-radius10px;
-webkit-border-radius10px;
}
.white-pink h1 {
font24px "Trebuchet MS", Arial, Helveticasans-serif;
padding0px 0px 10px 40px;
displayblock;
border-bottom1px solid #F5F5F5;
margin-10px -30px 10px -30px;
color#969696;
}
.white-pink h1>span {
displayblock;
font-size11px;
color#C4C2C2;
}
.white-pink label {
displayblock;
margin0px 0px 5px;
}
.white-pink label>span {
floatleft;
width20%;
text-alignright;
padding-right10px;
margin-top10px;
color#969696;
}
.white-pink input[type="text"].white-pink input[type="email"].white-pinktextarea,.white-pink select{
color#555;
width70%;
padding3px 0px 3px 5px;
margin-top2px;
margin-right6px;
margin-bottom16px;
border1px solid #e5e5e5;
background#fbfbfb;
height25px;
line-height:15px;
outline0;
-webkit-box-shadowinset 1px 1px 2px rgba(200,200,200,0.2);
box-shadowinset 1px 1px 2px rgba(200,200,200,0.2);
}
.white-pink textarea{
height:100px;
padding5px 0px 0px 5px;
width70%;
}
.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( linearleft topleft bottom, color-stop(0.05#ff5bb0), color-stop(1#ef027d);
background:-moz-linear-gradientcenter top#ff5bb0 5%#ef027d 100% );
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;
height40px;
line-height30px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #c70067;
}
.white-pink .button:hover {
background:-webkit-gradient( linearleft topleft bottom, color-stop(0.05#ef027d), color-stop(1#ff5bb0);
background:-moz-linear-gradientcenter 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 {
backgroundurl(‘down-arrow.png‘no-repeat right, -moz-linear-gradient(top#FBFBFB0%#E9E9E9 100%);
backgroundurl(‘down-arrow.png‘no-repeat right, -webkit-gradient(linearleft topleftbottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));appearance
:none;-webkit-appearance
:none;-moz-appearance
none;
text-indent0.01px;text-
overflow‘‘;
width70%;
line-height15px;
height30px;
}

第五、Bootstrap风格样式
技术分享
样式:
.bootstrap-frm {
margin-left:auto;
margin-right:auto;

 

max-width500px;
background#FFF;
padding20px 30px 20px 30px;
font12px "Helvetica Neue", Helvetica, Arialsans-serif;
color#888;
text-shadow1px 1px 1px #FFF;
border:1px solid #DDD;
border-radius5px;
-webkit-border-radius5px;
-moz-border-radius5px;
}
.bootstrap-frm h1 {
font25px "Helvetica Neue", Helvetica, Arialsans-serif;
padding0px 0px 10px 40px;
displayblock;
border-bottom1px solid #DADADA;
margin-10px -30px 30px -30px;
color#888;
}
.bootstrap-frm h1>span {
displayblock;
font-size11px;
}
.bootstrap-frm label {
displayblock;
margin0px 0px 5px;
}
.bootstrap-frm label>span {
floatleft;
width20%;
text-alignright;
padding-right10px;
margin-top10px;
color#333;
font-family"Helvetica Neue", Helvetica, Arialsans-serif;
font-weightbold;
}
.bootstrap-frm input[type="text"].bootstrap-frm input[type="email"].bootstrap-frmtextarea.bootstrap-frm select{
border1px solid #CCC;
color#888;
height20px;
line-height:15px;
margin-bottom16px;
margin-right6px;
margin-top2px;
outlinenone;
padding5px 0px 5px 5px;
width70%;
border-radius4px;
-webkit-border-radius4px;
-moz-border-radius4px;
-webkit-box-shadowinset 1px 1px rgba(0000.075);
box-shadowinset 1px 1px rgba(0000.075);
-moz-box-shadowinset 1px 1px rgba(0000.075);
}
.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-appearancenone;
text-indent0.01px;
text-overflow‘‘;
width70%;
height35px;
line-height:15px;
}
.bootstrap-frm textarea{
height:100px;
padding5px 0px 0px 5px;
width70%;
}
.bootstrap-frm .button {
background#FFF;
border1px solid #CCC;
padding10px 25px 10px 25px;
color#333;
border-radius4px;
}
.bootstrap-frm .button:hover {
color#333;
background-color#EBEBEB;
border-color#ADADAD;
}

第六、暗黑色样式
技术分享
样式:
.dark-matter {
margin-leftauto;
margin-rightauto;
max-width500px;
background#555;
padding20px 30px 20px 30px;
font12px "Helvetica Neue", Helvetica, Arialsans-serif;
color#D3D3D3;
text-shadow1px 1px 1px #444;
bordernone;
border-radius5px;
-webkit-border-radius5px;
-moz-border-radius5px;
}
.dark-matter h1 {
padding0px 0px 10px 40px;
displayblock;
border-bottom1px solid #444;
margin-10px -30px 30px -30px;
}
.dark-matter h1>span {
displayblock;
font-size11px;
}
.dark-matter label {
displayblock;
margin0px 0px 5px;
}
.dark-matter label>span {
floatleft;
width20%;
text-alignright;
padding-right10px;
margin-top10px;
font-weightbold;
}
.dark-matter input[type="text"].dark-matter input[type="email"].dark-matter textarea.dark-matter select {
bordernone;
color#525252;
height25px;
line-height:15px;
margin-bottom16px;
margin-right6px;
margin-top2px;
outlinenone;
padding5px 0px 5px 5px;
width70%;
border-radius2px;
-webkit-border-radius2px;
-moz-border-radius2px;
-moz-box-shadowinset 1px 1px rgba(0000.075);
background#DFDFDF;
}
.dark-matter select {
background#DFDFDF url(‘down-arrow.png‘no-repeat right;
background#DFDFDF url(‘down-arrow.png‘no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearancenone;
text-indent0.01px;
text-overflow‘‘;
width70%;
height35px;
color#525252;
line-height25px;
}
.dark-matter textarea{
height:100px;
padding5px 0px 0px 5px;
width70%;
}
.dark-matter .button {
background#FFCC02;
bordernone;
padding10px 25px 10px 25px;
color#585858;
border-radius4px;
-moz-border-radius4px;
-webkit-border-radius4px;
text-shadow1px 1px 1px #FFE477;
font-weightbold;
box-shadow1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}

 

.dark-matter .button:hover {
color#333;
background-color#EBEBEB;
}

6款漂亮HTML CSS样式用户留言表单