用CSS3优化HTML5表单的步奏

程序员文章站 2022-04-20 11:35:06

...

今天给大家带来用CSS3来优化HTML5表单的方法，首先我们创建一个表单，格式如下。

#redemption {
width: 100%;
font-family: 'ColaborateThinRegular';
font-weight: 400;
}
#redemption hgroup {
argin-bottom: 20px;
}
#redemption div {
width: 100%;
margin-bottom: 15px;
float: left;
}
#redemption span#range {
float: left;
font-size: 3em;
width: 100%;
color: red;
clear: both; text-align: center;
}
#howYouRateThis,#yearOfCrime {
text-align: right;
}
#redemption legend {
font-style: italic;
color: #434242;
font-size: 0.8em;
margin-bottom: 20px;
float: left; width: 100%;
}
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
}
#redemption label {
width: 40%;
float: left;
}
#redemption input {
height: 20px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption textarea {
height: 60px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption input#submit {
text-decoration: none;
height: 34px;
font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular'; background-color: #b01c20;
border-radius: 8px;
color: white; float: right;
margin-bottom: 10px;
background: linear-gradient(top, rgb(241,92,96) 0%, rgb(17 100%);
margin-top: 10px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
.polyfill-important .input-range,.polyfill-important .step-c float: right;
}
.polyfill-important .step-controls {
margin-right: -20px!important;
}

唯一需要注意的地方是最后两个样式只在相应的补丁脚本运行时发挥作用。首先，我想让每个 fieldset都有一个好看的渐变背景，相互之间稍微空开一点。下面是针对 fieldset修改后的 CSS代码：

#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
background: #ffffff; background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
border-radius: 4px;
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);
}

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！