[分享]css3带图片的表单

CSS3的出现让网页设计更加灵活，也使得一些经典的设计更容易地实现。今天我们来介绍一款带图片的表单。 姓名: 邮箱: 密码: 注册 以上是HTML代码。通过form元素和i...

CSS3的出现让网页设计更加灵活，也使得一些经典的设计更容易地实现。今天我们来介绍一款带图片的表单。

 <form class="form" action="#" method="post">
    <div class="form-group">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
      <span class="icon icon-user"></span>
    </div>
    <div class="form-group">
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" placeholder="请输入您的邮箱" required>
      <span class="icon icon-email"></span>
    </div>
    <div class="form-group">
      <label for="pwd">密码:</label>
      <input type="password" id="pwd" name="password" placeholder="请输入您的密码" required>
      <span class="icon icon-pwd"></span>
    </div>
    <div class="form-group">
      <button type="submit"><span>注册</span></button>
    </div>
  </form> 

以上是HTML代码。通过form元素和input元素，我们可以创建出基本的表单。但是为了让它更加美观，我们需要使用CSS3。下面是CSS代码：

 .form {
    margin: 20px auto;
    width: 400px;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    border-radius: 5px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="password"] {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.42857;
  }
  
  .form-group span {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 35px;
  }
  
  .icon-user {
    background-image: url("user.png");
  }
  
  .icon-email {
    background-image: url("mail.png");
  }
  
  .icon-pwd {
    background-image: url("pwd.png");
  }
  
  button[type="submit"] {
    display: block;
    width: 100%;
    border-radius: 3px;
    background-color: #4CAF50;
    color: #fff;
    font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;
    border: none;
  }
  
  button[type="submit"]:hover {
    background-color: #3e8e41;
  } 

我们为表单添加了一些样式，比如输入框的边框、背景色等等。其中最重要的是.form-group span选择器，它让我们可以在输入框后面添加一个小图标。

这里我们选用了三张图标：user.png、mail.png和pwd.png。这些图标可以通过CSS的background-image属性加载。

最后，我们得到的表单效果如下所示：

这款表单简单美观，代码也不难。希望大家可以学会使用CSS3来设计漂亮的表单。