Using :focus to style outer div?

Question

When I begin writing text in the textarea, I want the outer div, with a class box, to have its border turned solid instead of dashed, but somehow the :focus doesn't apply in this case. If it works with :active, how come it doesn't work with :focus?

Any ideas why?

(Note. I want the DIV's border to turn solid, NOT the textareas)

div.box
{
    width: 300px;
    height: 300px;
    border: thin dashed black;
}

div.box:focus{
    border: thin solid black;
}

<div class="box">
    <textarea rows="10" cols="25"></textarea>
</div>

It doesn't work with focus because the DIV will not have focus, only the TextArea will. I would image a DIV cannot have focus anyway as it is a non-selectable element — musefan, Oct 24 '11 at 13:26
You'd need to use JavaScript to achieve this; as while the div can take focus the textarea will immediately take it back if it's clicked. [JS Fiddle demo](http://jsfiddle.net/davidThomas/2yyGU/); clicking outside the `textarea` will change the borders of the `div`, but activating the `textarea` steals focus back. — David Thomas, Oct 24 '11 at 13:35

Danield · Answer 1 · 2018-11-27T14:10:55.623

Other posters have already explained why the :focus pseudo class is insufficient, but finally there is a CSS-based standard solution.

CSS Selectors Level 4 defines a new pseudo class:

:focus-within

From MDN:

The :focus-within CSS pseudo-class matches any element that the :focus pseudo-class matches or that has a descendant that the :focus pseudo-class matches. (This includes descendants in shadow trees.)

So now with the :focus-within pseudo class - styling the outer div when the textarea gets clicked becomes trivial.

.box:focus-within {
    border: thin solid black;
}

.box {
    width: 300px;
    height: 300px;
    border: 5px dashed red;
}

.box:focus-within {
    border: 5px solid green;
}

<p>The outer box border changes when the textarea gets focus.</p>
<div class="box">
    <textarea rows="10" cols="25"></textarea>
</div>

Codepen demo

NB: Browser Support : Chrome (60+), Firefox and Safari

Just want to mention that the tabindex is still needed, when there is a mix of static elements (div, span, etc.), and input elements inside the outer div, and the focus outline is needed even when one of the inner static elements is clicked. — Sayan Pal, Jun 12 '19 at 07:29

Karlen Kishmiryan · Answer 2 · 2016-02-17T08:31:38.313

90

DIV elements can get focus if set the tabindex attribute. Here is the working example.

#focus-example > .extra {
  display: none;
}
#focus-example:focus > .extra {
  display: block;
}

<div id="focus-example" tabindex="0">
  <div>Focus me!</div>
  <div class="extra">Hooray!</div>
</div>

For more information about focus and blur, you can check out this article.

Update: And here is another example using focus to create a menu.

#toggleMenu:focus {
  outline: none;
}
button:focus + .menu {
  display: block;
}
.menu {
  display: none;
}
.menu:focus {
  display: none;
}

<div id="toggleMenu" tabindex="0">
  <button type="button">Menu</button>
  <ul class="menu" tabindex="1">
    <li>Home</li>
    <li>About Me</li>
    <li>Contacts</li>
  </ul>
</div>

edited Feb 17 '16 at 08:31

answered Jun 20 '13 at 07:13

Karlen Kishmiryan

7,322
5
35
45

@NamanSood I've included the code to my answer. Check it out. – Karlen Kishmiryan Feb 17 '16 at 08:32
1

Is this cross-browser hack? – jayarjo Sep 23 '16 at 19:33
@jayarjo It works for me. Mozilla Firefox for Ubuntu, ver. 49.0 – Karlen Kishmiryan Sep 27 '16 at 14:05
1

It works when you don't have an input. If you click the non-input dom in the div, it works. If you click the input dom in the div, the input dom will capture your focus event and stop pop out. – ramwin Apr 01 '17 at 05:43

David Thomas · Accepted Answer · 2011-10-24T13:54:46.313

While this can't be achieved with CSS/HTML alone, it can be achieved with JavaScript (without need of a library):

var textareas = document.getElementsByTagName('textarea');

for (i=0;i<textareas.length;i++){
    // you can omit the 'if' if you want to style the parent node regardless of its
    // element type
    if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
        textareas[i].onfocus = function(){
            this.parentNode.style.borderStyle = 'solid';
        }
        textareas[i].onblur = function(){
            this.parentNode.style.borderStyle = 'dashed';
        }
    }
}

JS Fiddle demo.

Incidentally, with a library, such as jQuery, the above could be condensed down to:

$('textarea').focus(
    function(){
        $(this).parent('div').css('border-style','solid');
    }).blur(
    function(){
        $(this).parent('div').css('border-style','dashed');
    });

JS Fiddle demo.

References:

+1 for a detailed answer (especially one which doesn't need jQuery) — Michael Mior, Oct 24 '11 at 13:49
No longer the most efficient answer with the introduction of :focus-within pseudo-element! — Tekill, Oct 20 '17 at 16:02
this is a great answer and I think still effective since :focus-within is still currently a working draft. This was exactly what I needed. thank you. — d0rf47, Feb 25 '21 at 23:51

score 6 · Answer 4 · answered Oct 27 '20 at 16:31

6

focus-within

.box:focus-within {
  background: cyan;
}

read more here

answered Oct 27 '20 at 16:31

Moliere

89
2
9

score 5 · Answer 5 · answered Oct 20 '17 at 16:01

This can now be achieve through the css method :focus-within as examplified in this post: http://www.scottohara.me/blog/2017/05/14/focus-within.html

/*
  A normal (though ugly) focus
  pseudo-class.  Any element that
  can receive focus within the
  .my-element parent will receive
  a yellow background.
*/
.my-element *:focus {
  background: yellow !important;
  color: #000;
}

/*
  The :focus-within pseudo-class
  will NOT style the elements within
  the .my-element selector, like the
  normal :focus above, but will
  style the .my-element container
  when its focusable children
  receive focus.
*/
.my-element:focus-within {
  outline: 3px solid #333;
}

<div class="my-element">
  <p>A paragraph</p>
  <p>
    <a href="http://scottohara.me">
      My Website
    </a>
  </p>

  <label for="wut_email">
    Your email:
  </label>
  <input type="email" id="wut_email" />
</div>

score 4 · Answer 6 · answered Nov 13 '14 at 16:07

Simple use JQuery.

$(document).ready(function() {
  $("div .FormRow").focusin(function() {
    $(this).css("background-color", "#FFFFCC");
    $(this).css("border", "3px solid #555");
  });
  $("div .FormRow").focusout(function() {
    $(this).css("background-color", "#FFFFFF");
    $(this).css("border", "0px solid #555");
  });
});

    .FormRow {
      padding: 10px;
    }

<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <div style="border: 0px solid black;padding:10px;">
    <div class="FormRow">
      First Name:
      <input type="text">
      <br>
    </div>
    <div class="FormRow">
      Last Name:
      <input type="text">
    </div>
  </div>

  <ul>
    <li><strong><em>Click an input field to get focus.</em></strong>
    </li>
    <li><strong><em>Click outside an input field to lose focus.</em></strong>
    </li>
  </ul>
</body>

</html>

And more simplest, **don't use jquery**, there is nice example, solution, by @DavidThomas ... what is the point loading jquery file approx. 77-94kB for something like this, and much more... — nelek, Jun 19 '16 at 18:44
@nelek, if you anyway use jQuery, that's a great solution, more robust too (cross browser without spending forever to debug on browsers you don't even have access to!) — Alexis Wilke, Mar 21 '17 at 23:01

score 4 · Answer 7 · edited Mar 21 '17 at 22:58

4

As per the spec:

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

The <div> does not accept input, so it cannot have :focus. Furthermore, CSS does not allow you to set styles on an element based on targeting its descendants. So you can't really do this unless you are willing to use JavaScript.

edited Mar 21 '17 at 22:58

Alexis Wilke

19,179
10
84
156

answered Oct 24 '11 at 13:30

Jon

428,835
81
738
806

1

Note that a `
` can get focus if you set the `contenteditable="true"` attribute. But in that case that's probably not the answer.
– Alexis Wilke Mar 21 '17 at 22:59

score 2 · Answer 8 · edited Jan 11 '17 at 00:30

You can tab between div tags. Just add a tab index to the div. It's best to use jQuery and CSS classes to solve this problem. Here's a working sample tested in IE, Firefox, and Chrome (Latest versions... didn't test older).

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            var divParentIdFocus;
            var divParentIdUnfocus = null;

            $(document).ready(function() {              

                    $("div").focus(function() {
                        //$(this).attr("class", "highlight");
                        var curDivId = $(this).attr("id");

                        // This Check needs to be performed when/if div regains focus
                        // from child element.
                        if (divParentIdFocus != curDivId){
                            divParentIdUnfocus = divParentIdFocus;
                            divParentIdFocus = curDivId;
                            refreshHighlight();
                        }

                        divParentIdFocus = curDivId;
                    });


                    $("textarea").focus(function(){
                        var curDivId = $(this).closest("div").attr("id");

                        if(divParentIdFocus != curDivId){
                            divParentIdUnfocus = divParentIdFocus;
                            divParentIdFocus = curDivId;
                            refreshHighlight();
                        }
                    });

                    $("#div1").focus();
            });

            function refreshHighlight()
            {
                if(divParentIdUnfocus != null){
                    $("#" +divParentIdUnfocus).attr("class", "noHighlight");
                    divParentIdUnfocus = null;
                }

                $("#" + divParentIdFocus).attr("class", "highlight");
            }
        </script>
        <style type="text/css">
            .highlight{
                background-color:blue;
                border: 3px solid black;
                font-weight:bold;
                color: white;
            }
            .noHighlight{           
            }
            div, h1,textarea, select { outline: none; }

        </style>
    <head>
    <body>
        <div id = "div1" tabindex="100">
            <h1>Div 1</h1> <br />
            <textarea rows="2" cols="25" tabindex="101">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="102">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="103">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="104">~Your Text Here~</textarea> <br />
        </div>
        <div id = "div2" tabindex="200">
            <h1>Div 2</h1> <br />
            <textarea rows="2" cols="25" tabindex="201">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="202">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="203">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="204">~Your Text Here~</textarea> <br />
        </div>
        <div id = "div3" tabindex="300">
            <h1>Div 3</h1> <br />
            <textarea rows="2" cols="25" tabindex="301">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="302">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="303">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="304">~Your Text Here~</textarea> <br />
        </div>
        <div id = "div4" tabindex="400">
            <h1>Div 4</h1> <br />
            <textarea rows="2" cols="25" tabindex="401">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="402">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="403">~Your Text Here~</textarea> <br />
            <textarea rows="2" cols="25" tabindex="404">~Your Text Here~</textarea> <br />
        </div>      
    </body>
</html>

score 0 · Answer 9 · edited Nov 25 '22 at 16:33

0

You can use **:focus-within** to give style to outer div whenever an inner element is focused.

Another way to do that is to add **tabIndex** to a div. Then you can easily give **:focus** to just a div.

edited Nov 25 '22 at 16:33

Konstantinos Gallis

956
6
11

answered Nov 21 '22 at 13:04

Faiz Quraishi

1

score 0 · Answer 10 · answered Oct 24 '11 at 13:29

0

As far as I am aware you have to use javascript to travel up the dom.

Something like this:

$("textarea:focus").parent().attr("border", "thin solid black");

you'll need the jQuery libraries loaded as well.

answered Oct 24 '11 at 13:29

CBRRacer

4,649
1
23
27

Using :focus to style outer div?

10 Answers10

:focus-within

Linked