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 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      lt div class  box  gt       lt textarea rows  10  cols  25  gt  lt  textarea gt   lt  div gt

User · Answer

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     lt html gt       lt head gt           lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt           lt script type  text javascript  gt              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                           lt  script gt           lt style type  text css  gt               highlight                  background-color blue                  border  3px solid black                  font-weight bold                  color  white                             noHighlight                                       div  h1 textarea  select   outline  none              lt  style gt       lt head gt       lt body gt           lt div id    div1  tabindex  100  gt               lt h1 gt Div 1 lt  h1 gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  101  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  102  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  103  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  104  gt  Your Text Here  lt  textarea gt   lt br   gt           lt  div gt           lt div id    div2  tabindex  200  gt               lt h1 gt Div 2 lt  h1 gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  201  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  202  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  203  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  204  gt  Your Text Here  lt  textarea gt   lt br   gt           lt  div gt           lt div id    div3  tabindex  300  gt               lt h1 gt Div 3 lt  h1 gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  301  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  302  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  303  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  304  gt  Your Text Here  lt  textarea gt   lt br   gt           lt  div gt           lt div id    div4  tabindex  400  gt               lt h1 gt Div 4 lt  h1 gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  401  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  402  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  403  gt  Your Text Here  lt  textarea gt   lt br   gt               lt textarea rows  2  cols  25  tabindex  404  gt  Your Text Here  lt  textarea gt   lt br   gt           lt  div gt             lt  body gt   lt  html gt

User · Answer

Simple use JQuery    x000D   x000D    document  ready function     x000D       div  FormRow   focusin function     x000D        this  css  background-color     FFFFCC    x000D        this  css  border    3px solid  555    x000D        x000D       div  FormRow   focusout function     x000D        this  css  background-color     FFFFFF    x000D        this  css  border    0px solid  555    x000D        x000D      x000D       FormRow   x000D        padding  10px  x000D        x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  http   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div style  border  0px solid black padding 10px   gt  x000D       lt div class  FormRow  gt  x000D        First Name  x000D         lt input type  text  gt  x000D         lt br gt  x000D       lt  div gt  x000D       lt div class  FormRow  gt  x000D        Last Name  x000D         lt input type  text  gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt ul gt  x000D       lt li gt  lt strong gt  lt em gt Click an input field to get focus  lt  em gt  lt  strong gt  x000D       lt  li gt  x000D       lt li gt  lt strong gt  lt em gt Click outside an input field to lose focus  lt  em gt  lt  strong gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Some people  like me  will benefit from using the  focus-within pseudo-class   Using it will apply the css you want to a div  for instance   You can read more here https   developer mozilla org en-US docs Web CSS  focus-within

User · Answer

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  lt div gt  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

User · Answer

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       x000D   x000D   box   x000D      width  300px  x000D      height  300px  x000D      border  5px dashed red  x000D    x000D   x000D   box focus-within   x000D      border  5px solid green  x000D    x000D   lt p gt The outer box border changes when the textarea gets focus  lt  p gt  x000D   lt div class  box  gt  x000D       lt textarea rows  10  cols  25  gt  lt  textarea gt  x000D   lt  div gt  x000D   x000D   x000D    Codepen demo  NB  Browser Support   Chrome  60    Firefox and Safari

User · Answer

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

User · Answer

focus-within  box focus-within     background  cyan     read more here

User · Answer

DIV elements can get focus if set the tabindex attribute  Here is the working example    x000D   x000D   focus-example  gt   extra   x000D    display  none  x000D    x000D   focus-example focus  gt   extra   x000D    display  block  x000D    x000D   lt div id  focus-example  tabindex  0  gt  x000D     lt div gt Focus me  lt  div gt  x000D     lt div class  extra  gt Hooray  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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    x000D   x000D   toggleMenu focus   x000D    outline  none  x000D    x000D  button focus    menu   x000D    display  block  x000D    x000D   menu   x000D    display  none  x000D    x000D   menu focus   x000D    display  none  x000D    x000D   lt div id  toggleMenu  tabindex  0  gt  x000D     lt button type  button  gt Menu lt  button gt  x000D     lt ul class  menu  tabindex  1  gt  x000D       lt li gt Home lt  li gt  x000D       lt li gt About Me lt  li gt  x000D       lt li gt Contacts lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   x000D   x000D     x000D    A normal  though ugly  focus x000D    pseudo-class   Any element that x000D    can receive focus within the x000D     my-element parent will receive x000D    a yellow background  x000D     x000D   my-element   focus   x000D    background  yellow  important  x000D    color   000  x000D    x000D   x000D     x000D    The  focus-within pseudo-class x000D    will NOT style the elements within x000D    the  my-element selector  like the x000D    normal  focus above  but will x000D    style the  my-element container x000D    when its focusable children x000D    receive focus  x000D     x000D   my-element focus-within   x000D    outline  3px solid  333  x000D    x000D   lt div class  my-element  gt  x000D     lt p gt A paragraph lt  p gt  x000D     lt p gt  x000D       lt a href  http   scottohara me  gt  x000D        My Website x000D       lt  a gt  x000D     lt  p gt  x000D   x000D     lt label for  wut email  gt  x000D      Your email  x000D     lt  label gt  x000D     lt input type  email  id  wut email    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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 lt 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    getElementsByTagName    onfocus  onblur  parentNode  tagName  toString    toLowerCase    style  focus    blur    parent    css

[css] Using :focus to style outer div?

Examples related to css

Examples related to focus

Examples related to stylesheet