Question 44679 in Html Question posted in
Some basic documentation can be found here.

Focus is not trigger on details focus – Html

The problem is to style the detail html element when the focus pseudo-class is trigger.

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

MDN

Here is a demo snippet:

:focus { outline: none; }

body {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

details {
  background: red;
}

summary {
  background: green;
}

details:hover {
  box-shadow:0 0 0 2px blue;
}

/* this one doesn not work */
details:focus {
  box-shadow:0 0 0 2px blue;
}

button:focus {
  box-shadow:0 0 0 2px blue;
}
<input type="text" value="press tab to switch focus">

<details>
  <summary>summary should be blue on focus</summary>
  
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, ex facilis iusto. Ab laboriosam deserunt neque fuga reprehenderit, inventore non? Quo sint iusto commodi architecto magni sit maiores beatae exercitationem.
  </p>
</details>

<button>the button should be blue on focus</button>

Try it online!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After playing a bit with tabIndex as suggested by Sebsemillia, I went for another solution. In the origianl snippet we have this structure:

     - input
 - details
   - summary
 - button

    Without tabIndex=0, the browser focus on input, then skip details because it is not an interactive element, then move on to summary, then reach button.

    With tabIndex=0, the browser focus on input, then is forced to details even it is not an interactive element, then move on to summary, then reach button.

    Now here is the real problem with my question. Why bother give focus to details? Well the question's title is not good because what OP wants is to wrap the whole details/summary with a blue border.

    here how to actually fix the code.

    Replace

    details:focus {
  box-shadow:0 0 0 2px blue;
}

    with

    details:focus-within {
  box-shadow:0 0 0 2px blue;
}

    The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

    MDN

    :focus { outline: none; }

body {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

details {
  background: red;
}

summary {
  background: green;
}

details:hover {
  box-shadow:0 0 0 2px blue;
}

/* this should work */
details:focus-within {
  box-shadow:0 0 0 2px blue;
}

button:focus {
  box-shadow:0 0 0 2px blue;
}
    <input type="text" value="press tab to switch focus">

<details>
  <summary>summary should be blue on focus</summary>
  
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, ex facilis iusto. Ab laboriosam deserunt neque fuga reprehenderit, inventore non? Quo sint iusto commodi architecto magni sit maiores beatae exercitationem.
  </p>
</details>

<button>the button should be blue on focus</button>


  2. 0

    Focus does just work out of the box with interactive elements (e.g. inputs, buttons, links,..).

    If you want to make another element focusable, you can add the tabindex attribute.

    In your case it would look like that:

    <input type="text" value="press tab to switch focus">

<details tabindex="0">
  <summary>summary should be blue on focus</summary>

   <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, ex 
      facilis iusto. Ab laboriosam deserunt neque fuga reprehenderit, 
      inventore non? Quo sint iusto commodi architecto magni sit maiores 
      beatae exercitationem.
   </p>
</details>

<button>the button should be blue on focus</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search