本文摘自PHP中文网,作者不言,侵删。
本篇文章介绍的内容是关于CSS设置主动控件的样式,下面我们来看一下具体的内容。我们先来看一下语法格式:
通过指定元素,类和ID来描述它,如下所示:
设置特定标签时
设置特定类时
设置特定ID时
代码示例:
编写以下代码。
FocusSelector.css
1 2 3 4 5 6 | input {
background-color : #D0D0D0 ;
}
input:focus {
background-color : #FFD0D0 ;
}
|
说明:
由于描述了“input”,所以对INPUT标签的样式定义,并将背景颜色指定为灰色(#D0D0D0)。正常INPUT的定义是
1 | input { background-color : #D0D0D0 ;}
|
接收并激活焦点的样式定义,并且背景颜色指定为粉红色(#FFD0D0)。
1 | input:focus { background-color : #FFD0D0 ;}
|
FocusSelector.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title ></ title >
< link rel = "stylesheet" type = "text/css" href = "ForcusSelector.css" />
</ head >
< body >
输入1 : < input type = "text" />< br />
输入2 : < input type = "text" />< br />
输入3 : < input type = "text" />< br />
输入4 : < input type = "text" />< br />
输入5 : < input type = "text" />< br />
</ body >
</ html >
|
执行结果:
使用Web浏览器显示上述HTML。将显示如下所示的效果。
单击文本框并输入输入状态,文本框的背景颜色变为粉红色。
以上就是CSS设置主动控件的样式(焦点伪类的实现)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css a hover 不变色怎么办
css content属性怎么用
css怎么设置横向导航
css中文乱码怎么办
css中内边框是什么
css精灵技术有什么用?
如何利用css实现只在设置的框内点击链接跳转
css什么时候用class和id
css为什么要放在头部呢
dw怎么用css做图片轮播
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS设置主动控件的样式(焦点伪类的实现)