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

liuzhengyuan

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

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

---

伪类选择器：


UI伪类选择器：

---

1, :valid, :invalid

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

Style:

1. input:valid {
   
2.         border: 2px solid green;
   
3. }
   
4. input:invalid {
   
5.         border: 2px solid red;
   
6. }

复制代码

Main:

1. <form>
   
2.         <input type="email" name="email" placeholder="请输入邮箱^_^">
   
3.         <button type="submit">提交</button>
   
4. </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:

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

复制代码

效果：

---

3, :read-write, :read-only

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

Style：

1. input:read-write {
   
2.         background-color: greenyellow;
   
3. }
   
4. input:read-only {
   
5.         background-color: lightyellow;
   
6. }
   
7. input:-moz-read-write {
   
8.         background-color: greenyellow;
   
9. }
   
10. input:-moz-read-only {
    
11.         background-color: lightyellow;
    
12. }

复制代码

Main:

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

复制代码

效果：

---

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

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

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