What does focus mean in HTML-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What does focus mean in HTML

醉折花枝作酒筹

Jun 03, 2021 pm 04:27 PM

focus html

In HTML, focus means "focus". The ":focus" selector is used to select the element that has received focus. You only need to set the "element:focus{attribute:attribute value}" style to the element. ":focus" is a pseudo-class that applies to an element that has focus. The selector is applied for the time the element has focus.

What does focus mean in HTML

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

:The focus selector is used to select the element that receives focus.

:focus is a pseudo-class that applies to elements that have focus.

:focus applies to the time the element has focus.

The :focus selector can be used as long as it is an element that can receive keyboard events or other user input. In most cases, the :focus selector is used on links and form elements.

Example:

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

Copy after login

Note: :focus works on IE8, DOCTYPE must be declared

Example:

<!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>

Copy after login

Rendering:

What does focus mean in HTML

Note:

Under normal circumstances, the browser will automatically add an outline around the element when the form element gets focus. The style added by the browser is unique to each browser. Default styles, and often times, default styles look different between each browser.

But for the overall beauty of the page and browser style compatibility, we often need to modify the element style when it gets focus and replace the default style with our own style.

At this time we can use the css :focus selector to set the default style of the element when the browser gets focus.

Recommended learning: html video tutorial

The above is the detailed content of What does focus mean in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn