CODEWITHSUNDEEP
htmlcssfrontend
Sth
Sth

Reputation: 532

HTML element doesn't get focus when clicked

list-item

I need the elements to get focus on click, which will trigger special css for them swapping their bg-color and color (ex. first element). I achieved the current result by manually giving :focus to the element from chrome dev-tools.

.btns>span:focus {
  color: #2DB46A;
  background-color: #fff;
}

.btns>span {
  padding: 12px 0 8px 20px;
  color: #fff;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btns {
  list-style-type: none;
  color: #fff;
  background-color: #2DB46A;
  font-family: Facile;
  font-size: 18px;
  margin-bottom: 50px;
}
<ul id="list-container">
  <li class="btns"><span>pcb design</span></li>
  <li class="btns"><span>analog design</span></li>
  <li class="btns"><span>power design</span></li>
  <li class="btns"><span>wireless design</span></li>
  <li class="btns"><span>fpga design</span></li>
  <li class="btns"><span>embedded software</span></li>
</ul>

How to get the result like the first element on clicking for every one of the elements.

Upvotes: 1

Views: 1927

Answers (2)

Amessihel
Amessihel

Reputation: 6354

This answer is based on Barr J's response. As he said, use tabindex and :focus selector. So I think you should mark his answer as accepted.

Also, but maybe you did it on purpose, keep styling the sub-element span and not the li one, otherwise the focus border (dotted grey) will cover the orange one (Firefox at least) and you'll end up getting an ugly rendering.

.btns:focus > span {
  color: #2DB46A;
  background-color: #fff;
  border:1px solid orange;
}

By the way you should size the span element according to its border box, other wise it will be bigger than the ul element because of its padding value:

.btns>span {
  padding: 12px 0 8px 20px;
  box-sizing:border-box; /* Here */
}

Below a working snippet.

.btns {
  margin-bottom: 50px;
  list-style-type: none;
  font-family: Facile;
  font-size: 18px;
  background-color: #2DB46A;
  color: #fff;
}

.btns>span {
  padding: 12px 0 8px 20px;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btns:focus>span {
  color: #2DB46A;
  background-color: #fff;
  border: 1px solid orange;
}
<ul id="list-container">
  <li class="btns" tabindex="0"><span>pcb design</span></li>
  <li class="btns" tabindex="1"><span>analog design</span></li>
  <li class="btns" tabindex="2"><span>power design</span></li>
  <li class="btns" tabindex="3"><span>wireless design</span></li>
  <li class="btns" tabindex="4"><span>fpga design</span></li>
  <li class="btns" tabindex="5"><span>embedded software</span></li>
</ul>

Upvotes: 0

Barr J
Barr J

Reputation: 10919

Please note Html DOM level 2 specifications:

Element won't actually take focus unless it's one of the following:

  • HTMLAnchorElement/HTMLAreaElement with an href
  • HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement but not with disabled (IE actually gives you an error if you try), and file uploads have unusual behaviour for security reasons
  • HTMLIFrameElement (though focusing it doesn't do anything useful). Other embedding elements also, maybe, I haven't tested them all.
  • Any element with a tabindex

So if you want your .btns>span:focus to actually take focus, you will have to assign tabindex to your element.

Edited for addition:

An example by Weston Ruter can be found here

Upvotes: 6

Related Questions