Grow your CSS skills. Land your dream job.

:focus

Last updated on:

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example:

textarea:focus {
    background: pink;
}

And here's what that code looks like in action:

Any element (most commonly <input>s and <textarea>s) are in "focus" when they are selected and ready to enter text (like when a cursor is blinking.

"Tabbing"

Another use of the :focus pseudo class is "tabbing" through elements. Many browsers have a default focus state for tab selection, which is a dotted outline. It is quite easy to remove, but make sure to replace it with a suitable alternative if you do.

<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes work for this, as in this example:

Check out this Pen!

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
2+ 1.3+ Any 9.2+ 8+ Any Any

Comments

  1. Your Name
    Permalink to comment#

    test

  2. Permalink to comment#

    what is use of :focus

    • Permalink to comment#

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

      The :focus selector is allowed on elements that accept keyboard events or other user inputs.

      Here’s a example.

    • Tamil

      focus is used for change the background color (ex for input field focus).

    • pawan
      Permalink to comment#

      yes

    • krishnan
      Permalink to comment#

      Hi Kedar,
      :focus will execute the css we have written for the particular element type and thereby we can write the css codings inside. so that, we no need to write the css property again and again every where.
      for example,
      input[type=text]:focus{
      background-color:#ff0000;
      }
      if you write this css in your page then input tag with type text’s background color will be red whenever we focus it. this :focus automatically binds the onfocus event internally…

  3. Thanks for that dude! Worked fine for me :)

  4. is it possible to :focus on two elements?

    • Stan Rogers
      Permalink to comment#

      Is it possible for your cursor to be in two places at the same time? :focus is meant to give your user feedback as to where things will happen on-screen when they type or use selection keys, etc. The only way to get the focus state is to move the cursor to the element. But even if you could set the same visual state on two or more elements when one of them gets focus, why on earth would you? If two elements are lit up (or outlined) in the same way, where will the action occur? Remember that only text (and similar) inputs and textareas have a secondary indication, and it isn’t always easy to see the blinking cursor on the page. Use :focus to tell the user clearly what has focus, not as a page state gimmick.

  5. Very good info bro!

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".