Does not work :focus I can not understand why, with :active and :hover everything is fine, what is wrong?

CSS:

 .icons{ display: block; width: 104px; height: 92px; margin: 20px auto 0 auto; text-align: center; border-radius: 2px; background-color: rgb(251, 251, 251); box-shadow: 0px 0px 1px 0px rgba(20, 20, 21, 0.14); } .icons:focus{ border-radius: 2px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 36px 0px rgba(20, 20, 21, 0.2); }

HTML:

 <div id="title"> <div class="serviceIcon"> <div class="icons"> <img src="img\service\diagramm.png" alt="diagramm"> </div> <div class="icons"> <img src="img\service\tech.png" alt="tech"> </div> <div class="icons"> <img src="img\service\loope.png" alt="loope"> </div> <div class="icons"> <img src="img\service\diagramm.png" alt="diagramm"> </div> </div> <div class="serviceContent"> </div> <div class="serviceImage"> <img src="img\apple-watch-mockup.png" alt=""> </div> </div>

    1 answer 1

    The pseudo-class :focus defines the style for an element that receives focus. For example, it can be a text field of the form into which the cursor is positioned. It works mainly on form elements (textarea, input, etc.). To work on a div or other elements :focus , you need to specify the tabindex :

     div {width:200px;height:50px;background-color:grey} div:focus {background-color: green} 
     <div tabindex="0"></div>

    • or any valid tabindex itself, not necessarily 0 - Duck Learns to Hide
    • @ Duck Learns the mind, just looked in old browsers, it works only if the tablindex is exactly 0 - Yuri
    • in older browsers, where is it? Names, appearances, passwords - Duck Learns to Hide
    • one
      @ Duck Learns the mind, explorer and safari for windows (only the oldest safari for windows is) - Yuri
    • one
      In general, remember as a given; D - adckiykpolb