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 it\'s border turned solid instead of dashed, but somehow the :focus doesn\'t apply

Answer 1

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

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:

• getElementsByTagName().
• onfocus.
• onblur.
• parentNode.
• tagName.
• toString().
• toLowerCase().
• style.
• focus().
• blur().
• parent().
• css().