<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>&lt;input type="color"&gt; 示例</title>
    <style>
      html, input {
        font-family: sans-serif;
      }

      body {
        width: 90%;
        max-width: 500px;
        margin: 0 auto;
      }

      form {
        margin-top: 20px;
      }

      div {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      label, input, button {
        font-size: 14px;
        line-height: 1.5
      }

      label {
        text-align: right;
        width: 30%;
        margin-right: 2%;
      }

      input {
        flex: auto;
      }

      button {
        width: 70%;
        margin: 0 auto;
      }

    </style>
   </head>
  <body>
    <form>
      <div>
        <label for="color">选择一种颜色：</label>
        <input type="color" id="color" name="color">
      </div>
      <div>
        <button>提交</button>
      </div>
    </form>
    <script>

    </script>
</body>
  </html>
