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>

登入後複製

效果圖：

focus在HTML是什麼意思