CSS :focus-within pseudo class – use cases

by | Oct 17, 2021 | 0 comments

CSS :focus-within pseudo class – use cases

by | Oct 17, 2021 | CSS Tips and Tricks | 0 comments



When and how to use :focus-with css pseudo class. This video demos usage of focus-within in header dropdown menus and form elements. For navigation with tab keys and for highlighting certain elements when their child elements are in focus.

Codepen link.= https://codepen.io/CSSDevandUX/pen/mdRGxVr

#focus-within #CSS #FocusHighlight #FormStyling

————————————————————————————–
Codepen Channel = https://codepen.io/CSSDevandUX

Instagram = https://www.instagram.com/designcode_better/
A page for light hearted humour, tips & tricks, guides and new stuff in the world of design and coding.

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>