SOURCE

<form action="">
  <button type="submit">概要信息</button>
  <div class="fieldset-wrapper">
    <fieldset>
      <p class="field field-text">
        <label for="author">名称:</label>
        <input type="text" name="author" id="author" />
      </p>
      <p class="field field-text">
        <label for="email">编号:</label>
        <input type="email" name="email" id="email" placeholder="16位的编号信息" />
        <span id="comment-url-help" role="tooltip" class="form-help">请填写系统分配的正确编号信息！</span>
      </p>
      <p class="field field-text">
        <label for="url">邮箱:</label>
        <input type="url" name="url" id="url" />
        <span id="comment-url-help" role="tooltip" class="form-help">请填写公司分配的邮箱！</span>
      </p>
    </fieldset>
  </div>
  
  <div class="fieldset-wrapper">
    <fieldset>
      <legend>内容</legend>
      <p class="field field-text">
        <label for="comment">消息:</label>
        <textarea name="comment" id="comment" cols="20" rows="5">饶君君测试内容</textarea>
      </p>
    </fieldset>
  </div>
  
  <div class="fieldset-wrapper">
    <fieldset>
      <legend>记住我</legend>
      <p class="field">
        <label><input type="radio" name="remeber" value="yes" />是</label>
      </p>
      <p class="field">
        <label><input type="radio" name="remeber" value="no" />否</label>
      </p>
    </fieldset>
  </div>
</form>

fieldset {
  border: 0;
  padding: 0.01 px 0 0 0;
  margin: 0;
  min-width: 0;
  display: table-cell;
}

.fieldset-wrapper {
  padding: 1em;
  margin-bottom: 1em;
  border: 1px solid #eee;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}

:root .fieldset-wrapper {
  border: 0;
}

legend {
  padding: 0 0 .5em 0;
  font-weight: bold;
  color: #777;
  display: table;
}

input,
textarea {
  font: inherit;
}

.field-text {
  max-width: 30em;
}

.field-text label {
  cursor: pointer;
}

.field-text label,
.field-text input,
.field-text textarea {
  width: 100%;
  box-sizing:border-box;
}

.field-text input {
  padding: .375em .3125em .3125em;
  border: 1px solid #ccc;
  border-radius: .25em;
}

.field-text input:focus {
  box-shadow: 0 0 .5em rgba(93, 162, 248, 0.5);
  border-color: #5da2f8;
  outline: 0;
}

textearea {
  height:5em;
  resize:vertical;
}

input[type="radio"] {
  margin-right: .75em;
}

button {
  cursor: pointer;
  border: 0;
  padding: .5em 1em;
  color: #fff;
  border-radius: .25em;
  font-size: 1em;
  background-color: #173b6d;
  background-image: linear-gradient(to bottom, #1a4a8e, #173b6d);
  box-shadow: .25em .25em 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
}

button:focus,
button:hover {
  background-color: #2158a9;
  background-image: linear-gradient(to bottom, #2063c0, #1d4d90);
  box-shadow: .25em .25em 0 rgba(23, 59, 109, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.3);
}

::-webkit-input-placeholder {
  font-style: italic;
}

.form-help {
  display: block;
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}

input:focus + .form-help {
  padding: .5em;
  margin-top: .5em;
  border: 1px solid #e1de8a;
  border-radius: .25em;
  font-style: italic;
  color: #737373;
  background-color: #fff;
  
  position: static;
  width: auto;
  height: auto;
  crop: none;
}

input:invalid {
  border-color: #e72633;
  box-shadow: 0 0 .5em rgba(229, 43, 37, 0.5);
}