这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

表单样式（1）

本文通过表单样式来介绍几个不常用的CSS属性

01. 文本框样式

正常情况下，普通文本框的样式如下（未聚焦和聚焦状态）

首先，文本框的样式大部分都可以通过我们已知的CSS属性进行修改

input[type=text] {
    /* 通过width/height设置宽高 */
    width: 100px;
    height: 30px;
    /* 设置字体样式 */
    font-size: 18px;
    font-weight: bold;
    /* 设置内边距 */
    padding: 0 5px;
}

然后，最重要的应该是边框样式的设置，也是我们非常熟悉的**border属性**

PS：以下样式的设置是在上面样式设置的基础上进行的
```
input[type=text] {
    /* 通过border设置边框样式 */
    border:5px solid red;
    border-radius: 8px;
}
```
【注意】：如果不设置边框样式border-style，就会出现下面图片中第一种情况，即左上部分的颜色要暗一点

`outline`

其次，当聚焦时，文本框周围会有一圈轮廓，我们可以通过outline属性来控制
```
input[type=text] {
    /* 通过outline设置轮廓 */
    outline-style: dashed;
    outline-offset: 5px;
    outline-color: dodgerblue;
    outline-width: 5px;
    /* outline: none; */
}
```
解析：

outline-offset：即轮廓对文本框的偏移量，可以为负数，负数即显示在文本框内部

outline-color：轮廓颜色

outline-width：轮廓宽度

outline-style：轮廓样式

【注意】：如果设置了轮廓样式，则轮廓会常显；不设置样式，则默认在聚焦时才显示，默认样式为直线，轮廓无法圆角

一般情况，设置**outline:none即可隐藏轮廓**

`:focus`

接下来，通过**:focus伪类**，来控制文本框聚焦时的样式
```
input[type=text]:focus {
    /* 聚焦时样式 */
    box-shadow: 0px 0px 12px -1px #b1c1c3;
}
```
添加聚焦时的样式，如阴影，轮廓样式等等

`:placeholder`

还可以通过**:placeholder伪类**来控制提示信息的样式

input[type=text]::placeholder {
    /* 提示信息样式 */
    font-size: 14px;
    color: rgba(136, 127, 127, 0.774);
}

`caret-color`

可以通过caret-colro来改变输入光标的颜色，默认为黑色
```
input[type=text] {
    caret-color: red;
}
```

`:valid`、`:invalid`

:valid：这个伪类用来表示通过了校验的输入框或者其它表单元素的样式

invalid：这个伪类用来表示没有通过校验的输入框或者其它表单元素的样式

/* 这里用数字框方便看出效果 */

/* 输入格式错误 */
input[type=number]:invalid {
    background-color: orangered;
}

/* 输入格式正确 */
input[type=number]:valid {
    background-color: greenyellow;
}

说明：

第一个为默认没有输入情况

第二个为输入格式正确的情况

第三个为输入格式错误的情况

【CSS】表单样式（1）

表单样式（1）

01. 文本框样式

outline

:focus

:placeholder

caret-color

:valid、:invalid

`outline`

`:focus`

`:placeholder`

`caret-color`

`:valid`、`:invalid`