• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :focus

    CSS伪类:focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的tab键选择它时会被触发。此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素,请使用:focus-within

    语法:

    E:focus{sRules}

    设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

    • webkit内核浏览器会默认给:focus状态的元素加上outline的样式。
    • CSS伪类:focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的tab键选择它时会被触发。

    浏览器支持

    所有浏览器都支持:focus

    例子

    /* selects any <input> when focused */
    input:focus {
      color: red;
    }
    

    提示:此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素,请使用:focus-within

    //HTML
    
    <input class="red-input" value="i'll be red when focused."><br>
    <input class="blue-input" value="i'll be blue when focused.">
    
    //CSS
    
    .red-input:focus {
      background: yellow;
      color: red;
    }
    
    .blue-input:focus {
      background: yellow;
      color: blue;
    }
    

    下篇::checked