037-UI伪类选择器（II）| css3
本帖最后由 liuzhengyuan 于 2020-3-20 21:39 编辑《零基础入门学习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>
效果：
· 更多（吹水笔记-不二如是）·
· 课后作业·
下一篇：038-初学 css 的噩梦（V）
页:
[1]