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. User Avatar
    Your Name
    Permalink to comment#


  2. User Avatar
    Permalink to comment#

    what is use of :focus

    • User Avatar
      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.

    • User Avatar

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

    • User Avatar
      Permalink to comment#


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

    Thanks for that dude! Worked fine for me :)

  4. User Avatar
    Permalink to comment#

    is it possible to :focus on two elements?

    • User Avatar
      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.

    • User Avatar
      Permalink to comment#


    • User Avatar
      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. User Avatar
    Jota D

    Very good info bro!

  6. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    amit yadav

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

  10. User Avatar

    how to remove the background colour whem iam focussing

  11. User Avatar
    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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    Permalink to comment#

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

  16. User Avatar
    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. User Avatar
    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. User Avatar

    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. User Avatar
    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

  20. User Avatar
    Permalink to comment#

    Hi, am looking a way where the button background color can remain same even i click somewhere else on screen.
    I am setting some color to button using button:active and just goes away when i click somewhere else on screen. I have couple of buttons where i need to set this property, is this doable using CSS.


  21. User Avatar
    Permalink to comment#

    the above link is a question i asked today on stackoverflow. the solution given has issues. can you check my comments below it for help please.

  22. User Avatar
    Permalink to comment#

    how to add focus to <img tag inside an <a href tag?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.