本文摘自PHP中文网,作者不言,侵删。
本篇文章介绍的内容是关于CSS设置主动控件的样式,下面我们来看一下具体的内容。我们先来看一下语法格式:
1 2 3 |
|
通过指定元素,类和ID来描述它,如下所示:
设置特定标签时
1 2 3 |
|
设置特定类时
1 2 3 |
|
设置特定ID时
1 2 3 |
|
代码示例:
编写以下代码。
FocusSelector.css
1 2 3 4 5 6 |
|
说明:
由于描述了“input”,所以对INPUT标签的样式定义,并将背景颜色指定为灰色(#D0D0D0)。正常INPUT的定义是
1 |
|
接收并激活焦点的样式定义,并且背景颜色指定为粉红色(#FFD0D0)。
1 |
|
FocusSelector.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
执行结果:
使用Web浏览器显示上述HTML。将显示如下所示的效果。
单击文本框并输入输入状态,文本框的背景颜色变为粉红色。
以上就是CSS设置主动控件的样式(焦点伪类的实现)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html中是如何引入css样式?以及link与@import的区别(代码实例)
css animation-timing-function属性怎么用
更多相关阅读请进入《css》频道 >>
![Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节](https://img.alicdn.com/i2/2145487409/O1CN01QCkR4S24bNBeCh9Zu_!!0-item_pic.jpg)
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者