CSS设置聚焦是指当用户使用键盘导航时,浏览器将光标聚焦于目标元素上的行为。在使用键盘导航的情况下,聚焦至关重要,因为这将使用户能够轻松地在你的网站或应用程序中导航。
为了设置焦点,我们可以使用:focus伪类选择器。例如,以下CSS代码将在焦点聚焦在按钮上时更改字体颜色:
button:focus { color: red; }
你也可以设置其他的样式属性,例如背景色或边框:
button:focus { background-color: lightblue; border: 1px solid blue; }
要在输入框聚焦时较好地控制它们的外观,我们可以使用以下CSS代码:
input:focus { outline: none; box-shadow: 0px 0px 5px blue; }
在上面的代码中,我们使用了outline:none来删除默认的外部轮廓,使用box-shadow添加了一个类似于光线的样式来强调它。
聚焦状态对于可访问性非常重要。它可以帮助用户尤其是那些有视力障碍的人更好地理解他们正在与什么交互。通过在我们的CSS中设置聚焦样式,我们可以提高用户体验,并帮助我们的网站或应用程序更具可用性。