css代码写一个页面，实现电话号码提交验证，重新书写，退出功能，电话号码验证规则为：第一电话号码为数字，第二带区号则在区号与号码中间插入-号，第三电话号码为8位数字且区号为4位数字或者空

以下是实现电话号码验证的示例 CSS 代码：

/* 根据输入框的状态显示不同的样式 */
input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

/* 定义电话号码的输入格式 */
input[type="tel"] {
  /* 第一位为数字 */
  pattern: [0-9]{1}
  /* 第二部分为区号，用括号和短横线包裹 */
           [-]?[(]?[0-9]{3}[)]?[-\s.]?
  /* 第三部分为号码，用短横线分割 */
           [0-9]{3}[-\s.]?[0-9]{4}
}

这个样式规则定义了一个 `input[type="tel"]` 输入框，它的 `pattern` 属性描述了验证规则。验证规则中：

- 第一部分 `[0-9]{1}` 表示第一位必须是一个数字。
- 第二部分 `[-]?[(]?[0-9]{3}[)]?[-\s.]?` 表示可以有一个可选的短横线、可选的左括号，三个数字，可选的右括号和一个可选的分隔符（短横线、空格或点号）。
- 第三部分 `[0-9]{3}[-\s.]?[0-9]{4}` 表示三个数字，一个可选的分隔符和四个数字。

通过这个验证规则，输入的电话号码必须符合以上的格式，否则会显示红色的错误提示。如果电话号码格式正确，则会显示绿色的边框。