CSS フォーム検証機能の実装コード

<セクションクラス="コンテナ">
  <input type="text" name="tel" placeholder="携帯電話番号を入力してください" pattern="^1[3456789]\d{9}$" 必須><br>
  <input type="text" name="tel" placeholder="確認コードを入力してください" pattern="\d{4}" 必須><br>
  <button type="送信"></button>

入力{
  //検証に合格したときのボタンスタイル&:valid {
    &~ボタン{
      ポインタイベント: すべて;
      カーソル: ポインタ;
      ＆：：後 {
        内容: 「送信: +1:」
      }
    }
  }
  //検証が失敗した場合のボタンスタイル&:invalid {
    &~ボタン{
      ポインターイベント: none; // クリックイベントを削除してボタンをクリックできないようにします&::after {
        内容: 「未確認:面白がらない:」
      }
    }
  }
}