focus在HTML是什么意思-木庄网络博客

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

在html中，focus是“焦点”的意思。“:focus”选择器用于选取获得焦点的元素，只需要给元素设置“元素:focus{属性:属性值}”样式即可。“:focus”是一个伪类，它适用于具有焦点的元素，该选择器应用于元素具有焦点的时间内。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

:focus选择器用于选取获得焦点的元素。

:focus是一个伪类，它适用于具有焦点的元素。

:focus应用于元素具有焦点的时间内。

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

例子：

1 2	`a:focus {outline:` `1px` `dotted` `red;}` `input:focus {background: yellow;}`

注：:focus 作用于 IE8,DOCTYPE必须已声明

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      input:focus {
        outline: 0;
        /* 去除浏览器默认样式 */
        border: 2px solid rgb(238, 175, 238);
        background-color: rgb(255, 230, 192);
        text-shadow: 1px 1px saddlebrown;
      }
    </style>
  </head>
  <body>
    <p>点击文本输入框表单可以看到紫色边框和橘色背景:</p>
    <form>
      用户名: <input type="text" name="username" /><br />
      密　码: <input type="password" name="password" />
    </form>
  </body>
</html>