<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>:read-only 示例 — 确认表单</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px auto;
      max-width: 460px;
    }

    fieldset {
      padding: 10px 30px 0;
      margin-bottom: 20px;
    }

    legend {
      color: white;
      background: black;
      padding: 5px 10px;
    }

    fieldset > div {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }

    button, label, input[type="text"], textarea {
      display: block;
      font-family: inherit;
      font-size: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      padding: 5px;
      height: 30px;
    }

    input[type="text"], textarea {
      box-shadow: inset 1px 1px 3px #ccc;
      border-radius: 5px;
      width: 50%
    }

    textarea {
      height: 100px;
    }

    label {
      width: 40%;
    }

    input:hover, input:focus, textarea:hover, textarea:focus {
      background-color: #eee;
    }

    button {
      width: 60%;
      margin: 20px auto;
    }

    input:-moz-read-only, textarea:-moz-read-only {
      border: 0;
      box-shadow: none;
      resize: none;
      background-color: white;
    }

    input:read-only, textarea:read-only {
      border: 0;
      box-shadow: none;
      resize: none;
      background-color: white;
    }
  </style>
</head>

<body>
  <form>
    <fieldset>
      <legend>查看运单信息</legend>
      <div>
        <label for="name">姓名：</label>
        <input id="name" name="name" type="text"
               value="阮先生" readonly>
      </div>
      <div>
        <label for="address">地址：</label>
        <textarea id="address" name="address" readonly>
北京市朝阳区东三环中路32号
</textarea>
      </div>
      <div>
        <label for="pcode">邮编：</label>
        <input id="pcode" name="pcode" type="text"
               value="101600" readonly>
      </div>
    </fieldset>

    <fieldset>
      <legend>其他信息</legend>
      <div>
        <label for="sms-confirm">发送确认短信？</label>
        <input id="sms-confirm" name="sms-confirm" type="checkbox">
      </div>
      <div>
        <label for="instructions">其他额外说明？</label>
        <textarea id="instructions" name="instructions"></textarea>
      </div>
    </fieldset>

    <div><button type="button">细节修正</button></div>
    <div><button type="submit">提交</button></div>
  </form>
</body>

</html>
