037-UI伪类选择器（II）| css3

liuzhengyuan

《零基础入门学习web开发》第37讲 初学CSS的噩梦IV | 学习笔记

上一篇：036-UI伪选择器（I）

---

伪类选择器：


UI伪类选择器：

---

1, :valid, :invalid

:valid 定义输入合法时的样式；
:invalid 定义输入非法是的样式

Style:

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

Main:

<form>
        <input type="email" name="email" placeholder="请输入邮箱^_^">
        <button type="submit">提交</button>
</form>

运行效果：

---

2, :in-range, :out-of-range

:in-range 设定数值未超出范围时的样式
:out-of-range 设定数值超出范围时的样式

Style:
input:in-range {
        border: 2px solid green;
}
        input:out-of-range {
        border: 2px solid red;
}

Main:

<input type="number" min="1" max="10" value="5">
<button type="submit">提交</button>

效果：

---

3, :read-write, :read-only

read-only 是设置只读 input 的样式
read-write 是设置可读可写 input 的样式
PS：火狐浏览器必须加一个 -moz- 前缀，不然不起作用

Style：

input:read-write {
        background-color: greenyellow;
}
input:read-only {
        background-color: lightyellow;
}
input:-moz-read-write {
        background-color: greenyellow;
}
input:-moz-read-only {
        background-color: lightyellow;
}

Main:

<label>读写：<input type="text" name="rw"></label> <br><br>
<label>只读：<input type="text" name="ro" value="改不掉我把，哈哈哈" readonly></label><br><br>
<button type="submit">提交</button>

效果：

---

· 更多（吹水笔记-不二如是）  ·

· [url=]课后作业[/url]  ·

下一篇：038-初学 css 的噩梦（V）