Introduction to CSS pseudo selector focus-within

Original: Introduction to CSS pseudo selector focus-within

In CSS: the focus-within pseudo selector can be a bit "unusual", although its name looks simple and intuitive.But its explanation is to select an element that contains any child elements with: focus.It's a little confused, but it should be understood by careful reading. Here's a more specific example.

form:focus-within {
  background: lightyellow;
}

It works like this:

<form action="#">
  <input type="text">
</form>

form is selected when its child element input gets focus.

I say "unusual" because in CSS, it is not common, and certainly useful, to select a parent element based on the presence or state of its child elements.

Here's an example:

<form action="#">
  <h2>This is a form</h2>
  <div>
    <label class="desc" id="title1" for="Field1">Full name</label>
    <div>
      <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
    </div>
  </div>
  <div>
    <label class="desc" id="title3" for="Field3">mailbox</label>
    <div>
      <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
   </div>
  </div>
  <div>
    <label class="desc" id="title4" for="Field4">content</label>
    <div>
      <textarea id="Field4" name="Field4" spellcheck="true" rows="3" cols="50" tabindex="4"></textarea>
    </div>
  </div>
  <div>
    <fieldset>
      <legend id="title5" class="desc">Please select</legend>
      <div>
      	<input id="radioDefault_5" name="Field5" type="hidden" value="">
      	<div>
      		<input id="Field5_0" name="Field5" type="radio" value="First Choice" tabindex="5" checked="checked">
      		<label class="choice" for="Field5_0">First Choice</label>
      	</div>
        <div>
        	<input id="Field5_1" name="Field5" type="radio" value="Second Choice" tabindex="6">
        	<label class="choice" for="Field5_1">Second Choice</label>
        </div>
      </div>
    </fieldset>
  </div>
  <div>
    <fieldset>
      <legend id="title6" class="desc">Please select</legend>
      <div>
      <div>
      	<input id="Field6" name="Field6" type="checkbox" value="First Choice" tabindex="8">
      	<label class="choice" for="Field6">First Choice</label>
      </div>
      <div>
      	<input id="Field7" name="Field7" type="checkbox" value="Second Choice" tabindex="9">
      	<label class="choice" for="Field7">Second Choice</label>
      </div>
    </fieldset>
  </div>
  <div>
    <label class="desc" id="title106" for="Field106">Please select</label>
    <div>
    <select id="Field106" name="Field106" class="field select medium" tabindex="11">
      <option value="First Choice">First Choice</option>
      <option value="Second Choice">Second Choice</option>
    </select>
    </div>
  </div>
</form>
form:focus-within {
  background: #f9f98b;
}
form header {
  padding: 2rem;
}
form header div {
  font-size: 90%;
  color: #999;
}
form header h2 {
  margin: 0 0 5px 0;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 0.5rem 2rem;
}
form > div:last-child {
  padding-bottom: 2rem;
}
form > div:focus-within {
  background: #a1c084;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 15%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 85%;
  float: right;
}
form > div > fieldset label {
	font-size: 90%;
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
	width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}

Design sketch:

Note that the above example is used on the entire form and its internal div: focus-within.Focusing a child element in any way triggers: focus-within.For example, if an element has a tab-index or contenteditable attribute, it is a focused element.It doesn't matter how the element becomes the focus; it can be clicked or touched, navigated in other ways, or even focused through JavaScript, for example:

document.querySelector("input").focus();

Here are the following: focus-within support on major browsers:

So far, most of the mainstream browsers have been supported.

Tags: Attribute Javascript

Posted on Thu, 28 May 2020 19:54:54 -0400 by jworisek