Treehouse: Grow your CSS skills. Land your dream job.


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.


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


  1. Your Name
    Permalink to comment#


  2. Kedar
    Permalink to comment#

    what is use of :focus

    • Tudor
      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#


    • 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,
      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. Surce Beats
    Permalink to comment#

    Thanks for that dude! Worked fine for me :)

    Permalink to comment#

    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.

    • sandeep
      Permalink to comment#


  5. Jota D

    Very good info bro!

  6. Vishal Chandola
    Permalink to comment#

    :focus when we use this property then on focus that means on click the particular button or a tag pick the particular css which we write for on focus event like below mention example.
    :focus {
    background: #ddd;
    border: 1px solid #000;

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";