css中focus选择器怎么用

这篇文章主要为大家展示了“css中focus选择器怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中focus选择器怎么用”这篇文章吧。

创新互联专注于网站建设|网站维护|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖纱窗等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身定制品质网站。

css:focus选择器的简单介绍

:focus是css的一个伪类选择器,可以用来选取获得焦点的元素,然后为这些获得焦点的元素设置样式。

只要是可以接收键盘事件或其他用户输入的元素都可以:focus选择器,大多数情况下:focus选择器都是被使用在链接和表单元素上的。

例如:用户单击一个input输入框获取焦点,然后这个input输入框的边框样式就会发生改变,和其他的输入框区别开来,表明已被选中。

一般情况下,浏览器都会自动在表单元素获取焦点时给元素周围添加轮廓,由浏览器添加的样式是每个浏览器的默认样式,并且通常情况下,每个浏览器之间的默认样式看起来是不一样。但为了页面的整体美观和浏览器的样式兼容性,往往我们都需要修改获得焦点时的元素样式,把默认样式替换为我们自己的样式。

这个时候我们就可以使用css:focus选择器来设置浏览器在获得焦点时的的元素默认样式。例:

input:focus{

outline:0;/*去除浏览器默认样式*/

border:2pxsolidpink;

}

说明:轮廓类似于边框,但它们并不完全相同,我们需要通过outline属性来设置它的样式。例如:设置outline:0;来去除轮廓。

我们还可以把css:focus选择器使用在链接上,例:

a:focus{

outline:0;

color:red;

}

注:

当我们使用css:focus选择器来链接样式时,建议是在:link和:visited选择器设置的样式之后设置:focus样式,否则:focus选择器提供的样式将被:link和:visited选择器提供的样式给覆盖掉。

除了这三个伪类中,:hover和:active伪类也可以用来设置链接样式,它们提供的样式在:focus的样式之后出现。

上面提到的顺序,即:link,visited,focus,hover,active的顺序是首选的,这样可以确保在必要时应用每个伪类的样式,并且不会被另一个伪类的样式覆盖。例:

a:link{

color:#0099cc;

}

a:visited{

color:grey;

}

a:focus{

background-color:black;

color:white;

}

a:hover{

border-bottom:1pxsolid#0099cc;

}

a:active{

background-color:#0099cc;

color:white;

}

css:focus选择器的示例:

在聚焦输入和文本区域字段的背景颜色转换为浅黄色突出显示,带有浅红色边框。

html代码:

聚焦这里,textarea文本框

css代码

.container{

margin:40pxauto;

max-width:400px;

}

input,

textarea,

button{

padding:.5em;

display:block;

width:100%;

margin-bottom:.5em;

}

a:link{

color:deepPink;

}

/*:focusstyles*/

a:focus,

input:focus,

textarea:focus,

button:focus{

/*overridedefaultbrowseroutline*/

outline:0;

/*applyotherstyles*/

outline:2pxsolid#F47E58;

border-radius:5px;

}

input:focus,

textarea:focus{

background-color:#FFFF66;

}

以上是“css中focus选择器怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前标题:css中focus选择器怎么用
链接分享:http://scyanting.com/article/jdjesp.html

其他资讯