focus在HTML是什么意思-前端问答-PHP中文网

focus在HTML是什么意思

醉折花枝作酒筹

发布： 2023-01-06 11:16:26

原创

9086 人浏览过

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

focus在HTML是什么意思

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

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

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

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

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

例子：

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>

登录后复制

效果图：