我的 Input框 不可能这么可爱

<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
    input[type="text"]:invalid ~ input[type="submit"],
    input[type="password"]:invalid ~ input[type="submit"] {
      display: none;
    }
    input[required]:focus:invalid + span {
      display: inline;
    }
    input[required]:empty + span {
      display: none;
    }
    input[required]:invalid:not(:placeholder-shown) + span {
      display: inline;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">
    账号：
   <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}"
    name="account" type="text" required />
    <span class="f-tips">请输入正确的账号</span>
    <br />
    密码：
    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}"
    name="password" type="password" required />
    <span class="f-tips">请输入正确的密码</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>

<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">
    账号：
    <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}"
    name="account" type="text" required />
    <span class="f-tips">请输入正确的账号</span>
    <br />
    密码：
    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}"
    name="password" type="password" required />
    <span class="f-tips">请输入正确的密码</span>
    <br />
    <input name="button" type="submit" value="提交" />
</form>

<label>
    <!--
     当前pattern的内容就是验证input[name="part"]的value的，
      其规则如同里面的正则一样，匹配input[name="part"]的value是否是一个数字+3个大写字母
    -->
    <input pattern="[0-9][A-Z]{3}" name="part" />
</label>

input[type="text"]:invalid ~ input[type="submit"],
input[type="password"]:invalid ~ input[type="submit"] {
    display: none;
}
input[required]:focus:invalid + span {
    display: inline;
}
input[required]:empty + span {
    display: none;
}
input[required]:invalid:not(:placeholder-shown) + span {
    display: inline;
}

<style>
    body {
        background: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    input {
        margin-right: .25em;
        width: 30px;
        height: 30px;
    }
    label {
        position: relative;
        top: 1px;
        font-size: 30px;
    }
</style>
<form>
    <input type="checkbox" id="checkbox">
    <label for="option">点击左边</label>
</form>
<script>
      ‘use strict‘;
      checkbox.addEventListener(‘click‘, ev => {
        if (ev.target.readOnly) {
          ev.target.checked = ev.target.readOnly = false;
        } else if (!ev.target.checked) {
          ev.target.readOnly = ev.target.indeterminate = true;
        };
      });
</script>

<input type="text" list="names" multiple />
<datalist id="names">
    <option value="kris">
    <option value="陈大鱼头">
    <option value="深圳金城武">
</datalist>
 
<input type="email" list="emails" multiple />
<datalist id="emails">
    <option value="chenjinwen77@foxmail.com" label="kris">
    <option value="chenjinwen77@gmail.com" label="kris">
</datalist>
 
<input type="date" list="dates" />
<datalist id="dates">
    <option value="2019-09-03">
</datalist>