css中focus选择器有什么用

互联网 18-11-29

本篇文章来给大家介绍一下css :focus选择器有什么用？如何使用？下面我们来看具体的内容。

css :focus选择器的简单介绍

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

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

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

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

input:focus{     outline:0; /* 去除浏览器默认样式 */     border: 2px solid pink; }

效果图：

说明：轮廓类似于边框，但它们并不完全相同，我们需要通过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: 1px solid #0099cc; }  a:active {     background-color: #0099cc;     color: white; }

css :focus选择器的示例：

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

html代码：

<div class="container">   <div class="form">     <input type="text" placeholder="背景会变黄">     <input type="text" placeholder="得到一个红色的边框">     <textarea name="area" id="area" cols="30" rows="10">聚焦这里,textarea文本框</textarea>     <button>按钮</button>   </div> </div>

.container {   margin: 40px auto;   max-width: 400px; } input, textarea, button {   padding: .5em;   display: block;   width: 100%;   margin-bottom: .5em; } a:link {   color: deepPink; } /* :focus styles */ a:focus, input:focus, textarea:focus, button:focus {   /* override default browser outline */    outline: 0;   /* apply other styles */    outline: 2px solid #F47E58;   border-radius: 5px; }  input:focus, textarea:focus {   background-color: #FFFF66; }

效果图：