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#


    • Randy
      Permalink to comment#

      I actually have a use case where this is needed. We have an application where a user is looking at an image of handwritten text on the left side of the screen, drawing a box, and typing what it says in the box (like a person’s name); and then that name appears in a person name field in the “structured data” view on the right. As they type on the left, it updates on the right. That works fine. We wish that it would look like a text edit field that has “focus” on both fields at once, so that the user could look either place and feel like it’s ok to edit there. Both would stay in sync. It’s just a convenience to the user to edit where they’re looking/thinking about it.

  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;

  7. Benson Karue
    Permalink to comment#

    Am asking what about focus out. is to possible to target focusOut
    using css. I might use it in bootstrap is i get help from you guys

  8. Abhishek chauhan

    Am asking what about focus out. is to possible to target focusOut
    using css. I might use it in bootstrap is i get help from you guys

  9. amit yadav

    .input:focus { background: pink; color:#000;}

  10. hanumansingh

    how to remove the background colour whem iam focussing

  11. Louis Bispo
    Permalink to comment#

    button:focus doesn’t appear to work in Firefox or Safari in Mac OSX, nor in Safari iOS. That’s enough users to make that one effectively unusable.

  12. Mark
    Permalink to comment#

    I have used :focus as a technique for drop-down menus:


    <ul id="nested">
        <li tabindex="0">fruit
                <li><a href="#">apple</a></li>
                <li><a href="#">banana</a></li>
                <li><a href="#">cherry</a></li>
                <li><a href="#">donut</a></li>


    ul#nested>li:focus {
        outline: none;
    ul#nested>li:focus>ul {
        display: block;

    The tabindex attribute enables focus, and the outline property removes the visual indicator.
    Supposed to work from IE8 up.

  13. gireejatmaj
    Permalink to comment#

    I want to make a particular area text area focus true when i will click on another button. (cursor should blink in text are when i click on particular button)

    Autofocus works good but only once when page refreshes. I want to focus( cursor blink in text area) on every click on particular button.

    • Mark
      Permalink to comment#

      If it’s really a button, no, it can’t be done without JavaScript.

      If you create a label for the textarea, then that’s exactly what it’s supposed to do. The label and the textarea don’t have to be next to each other as long as you give the textarea an id attribute, and use the for attribute in the `label.

      Using CSS, you can make the label look any way you want, including the appearance of a button.

  14. Gireejatmaj
    Permalink to comment#

    I couldnt understand mark. Can you please explain using one example? If i you are saying that javascript is needed for button then please write that java script. As well as explain how to make it possible using label. Please give suitable example for each.

    • Mark
      Permalink to comment#

      The label is supposed to act like a button for this purpose. You can use it as follows:

      <p><label for="message">Enter Message</label></p>
      <p><textarea id="message" name="message"></textarea></p>

      Alternatively, instead of (or as well as) the label above, you could add the following:

      <button id="select-message">Message</button>
      //  inside initialisation script
          document.getElementById('select-message').onclick=function() {

      Do I get extra credit for this?

  15. Gireejatmaj
    Permalink to comment#

    Thanx mark bro
    Do you have solution for same problem using angularjs? It will be best option for me.

  16. Web Developer
    Permalink to comment#

    Is it possible to use input along with focus and not selector?
    I want to apply the focus selector to all the input elements but one.
    Can we use something like:

  17. Andy
    Permalink to comment#

    I think Abhishek asked this above but I didn’t see an answer. If I focus on something and then go backwards, how does one “reset” so that it doesn’t remain focused?

  18. Imanuel

    In iOS Safari I can’t get two divs to focus one after another. The first element stays focused on clicking the second one. Is there a workaround for this?

  19. Rakesh
    Permalink to comment#


    actually if we take login and signup buttons side by side and if we click on login button , the signup button background color should be disappeared and in the same way if we click on login button, signup button background color should be diasppeared /// send the code this as soonas possible

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 triple backtick fences like this:

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

We have a pretty good* newsletter.