CSS3大样式字段集注册表单

Experimenting with CSS3, I created a big style registration form with rounded borders and shadow effects. The only image used is not the button, but the pen that serves as a background image for the form itself.

在CSS3上进行实验，我创建了一个带有圆形边框和阴影效果的大型样式注册表单。 使用的唯一图像不是按钮，而是用作表单本身的背景图像的笔。

Click on the image to see the demo of the page:

单击该图像以查看页面的演示：

Click on the image to see a DEMO

点击图片查看演示

The CSS code has a lot of CSS3 elements and this form will only work in browsers that have support for CSS3 (which IE of course has not):

CSS代码包含很多CSS3元素，这种形式仅适用于支持CSS3的浏览器(IE当然不支持)：

form.registration{
 width:600px;
 float:left;
 color:#818181;
 background: #f1f1f1 url(pen.png) no-repeat top right;
 border: 2px solid #ccc;
 padding:10px;
 font-family: Georgia;
 font-size: 14px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
}

The form will have rounded borders and a box shadow which looks very intriguing by using rgba values. Next, we define how the fieldset should be positioned:

表单将具有圆角边框和框阴影，通过使用rgba值，该阴影看起来非常吸引人。 接下来，我们定义字段集的定位方式：

form.registration fieldset{
  border-top:1px solid #ccc;
  border-left:0;
  border-bottom:0;
  border-right:0;
  padding:6px;
  margin:0px 30px 0px 0px;
}

The legend will give a name to the fieldset and we want it to have a less intense color:

图例将为字段集命名，我们希望它的颜色不那么强烈：

form.registration legend{
  text-align:left;
  color:#ccc;
  font-size:18px;
  padding:0px 4px 0px 4px;
  margin-left:20px;
}

Now, let’s define the rest of the form:

现在，让我们定义表单的其余部分：

form.registration label{
  font-size: 32px;
  width:200px;
  float: left;
  text-align: right;
  color:#999;
  clear:left;
  margin:4px 4px 0px 0px;
  padding:0px;
}
form.registration input{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  width:300px;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:32px;
  padding:3px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
form.registration input:focus, form.registration select:focus{
  background-color:#E0E6FF;
}
form.registration select{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:40px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

And now, let’t define some style for the CSS3 button:

现在，让我们为CSS3按钮定义一些样式：

.button, .button:visited{
  float:right;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 5px 10px 5px 5px;
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  padding: 10px 15px;
  background-color: #00abdf;
  display: inline-block;
  -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.button:hover{
  background-color: #777;
}

The html code looks as follows:

html代码如下所示：

<form>
 <fieldset>
 <legend>About you</legend>
 <label>First name</label>
 <input type="text" maxlength="100" value=""/>           
 <label>Last name</label>
 <input type="text" maxlength="100" value=""/>                                  
 <label>Birthdate</label>
 <select>
 <option value="1">1</option>
 <option value="2">2</option>                             
 </select>
 <select>                               
 <option value="1">January</option>
 <option value="2">February</option>
 </select>
 <select>                           
 <option value="2009">2009</option>
 <option value="2008">2008</option>              
 </select>          
 </fieldset>
 <fieldset>
 <legend>Account details</legend>
 <label>E-Mail</label>
 <input type="text" maxlength="120" value=""/>
 <label>Password</label>
 <input type="password" maxlength="20"/>                                          
 </fieldset>
 <fieldset>   
 <a>Register</a>  
 </fieldset>   
</form>

Enjoy!

请享用！

翻译自: https://tympanus.net/codrops/2009/09/01/css3-big-style-fieldset-registration-form/