CSS: Focus-WITHIN pseudo-class selector and pure CSS drop-down application examples « Zhang Xinxu – Xin space – Xin life

CSS: Focus-within pseudo-class selector and pure CSS dropdown examples

This article was posted on Sunday, Jan 21, 2018, 23:56 and is categorized underCSS related. Read 424 times, 209 times today

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

CSS: Focus-Within pseudo-class selector

CSS :focus-within pseudo-class selector and IE8 start to support :focus is a close relative, the difference is that focus refers to the current element in the focus state. And focus-within indicates what the current element or its children do when they are in focus.

Here’s an example:

form:focus {
  outline: solid;
}Copy the code

The

form:focus-within {
  outline: solid;
}Copy the code

The

The support of this new feature is bound to lead to richer forms of interaction and scenario-specific simplification of our implementation in the future.

compatibility

The compatibility is as follows:

It’s kind of nice.

2, CSS: Focus-within pseudo-class selector application examples

1. Form input do not disturb mode

When we enter, select, or interact with a form, nothing else is visible on the page.

The CSS code is as follows:

Form {outline: 2000px solid HSLA (0,0%,100%,0); transition: outline .2s; position: relative; z-index: 1; } form:focus-within {outline: 2000px solid HSLA (0,0%,100%,1); }Copy the code

The effect is like a screenshot GIF:

Large screen browser experience more feeling, you can be hard to click here: :focus-within pseudo-class selector and form input do not disturb mode demo

This case is a real do not disturb mode effect can be safely used in the actual project, because this is an experience enhanced interaction, even if the browser does not support, the original function will not have any impact.

2. Focus with count text fields

For componentized multi-line text fields with counts, the count value is usually designed in the lower right corner of the text field, so that it can adapt to various complex scenarios. Screenshot below:

However, this design brings challenges to our layout implementation.

The way we usually think about it is that the count element floats on top of the textarea element below. However, this timing has a fatal drawback, that is, the contents of the input field may overlap with our count, as well as the emergence of the scroll bar and technical text overlap, as shown in the screenshot below:

You can click here ruthlessly: belt count text field itself :focus overlap problem demo

Therefore, the usual approach is: borders are modeled with a parent

Suppose the HTML looks like this:

<div class="textarea-x">
    <textarea></textarea>
    <label class="textarea-count">0/250</label>
</div>Copy the code

The core CSS looks like this:

Textarea -x {border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff; Textarea -x > textarea {border: 0; background: none; }Copy the code

The above implementation, however, has a serious flaw in the element: the border cannot be highlighted at focus because there is no parent selector in the CSS!

Therefore, in real development, we will use the adjacent sibling selector and create a new sibling element to simulate the border.

The HTML structure is as follows:

<div class="textarea-x">
    <textarea></textarea>
    <div class="textarea"></div>
    <label class="textarea-count">0/250</label>
</div>Copy the code

The principle is shown as follows:

The corresponding core CSS code is as follows:

.textarea-x {
    position: relative;
    z-index: 0;
}
.textarea-x > textarea {
    border: 0;
    background: none;
    outline: 0;
    resize: none;
    position: relative;
}
.textarea-x > .textarea {
    position: absolute;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
    top: 0; bottom: 0; left: 0; right: 0;  
    z-index: -1;
}
.textarea-x > :focus + .textarea {
    border-color: #00a5e0;    
}Copy the code

Since the. Textarea element and the native element are neighboring siblings, we can use the neighboring sibling selector to highlight the. Textarea element that is used to simulate the border. Here is the CSS code:

.textarea-x > :focus + .textarea {
    border-color: #00a5e0;    
}Copy the code

This implementation is compatible with IE7+ browsers. The screenshot below is the effect after implementation:

Of course, when it comes to the specific code, there are still a lot of details to pay attention to, you can mercilessly click here: using adjacent sibling selector simulation with counting text field: Focus effect demo

But now that we have the CSS: Focus-Within pseudo-class selector, things are much simpler.

The parent

.textarea-x:focus-within {
    border-color: #00a5e0;    
}Copy the code

It’s that simple.

You can click here ruthlessly: :focus-within pseudo classes with a highlighted text field with counts

The effect of focus is shown in the screenshot below:

More ideas, better cases and conclusions

The :focus-within pseudo-class was designed to work with the native form element focus, and the ancestor

But in my opinion, the power of the: Focus-Within feature is much more than just playing house with the ancestor

In theory, as long as any element on the page focus, through :focus-within can control the style of any element on the page.

Such as:

HTML :focus-within XXX {/* XXX Can't run */}Copy the code

I think of:

1. Adjacent selectors, plus signs, or bends can only select the next element, but there it is:focus-within, we can control the previous elements, although only in:focusBehavioral scenarios. For example, if you want to enter your password again, make the input password box highlighted.
2. It is possible to interact with drop-down lists based on pure CSS and focus behavior. Just put the button and the dropdown element in a container and you’re done.

   You can click here ruthlessly: :focus-within Pseudo classes with pure CSS dropdown list demo

   Click “My Messages,” and a drop-down list appears; Click on the item in the drop-down list, and the drop-down element remains displayed (because the list is a focus-able element). The drop-down list is hidden only when you click on a blank element or other location on the page. Fully in line with the actual project development of the drop-down list interaction requirements.

   The interactive effect is shown in the following GIF screenshot:

   

   The core code is as follows:

   <div class="details"> <a href="javascript:" class="summary"> My message </a> <div class="box"> <a My answer href = "javascript" > < sup > 12 < / sup > < / a > < a href = "javascript" > my direct messages < / a > < a href = "javascript" > not evaluation order < sup > 2 < / sup > < / a > < a </a> </div>Copy the code

   .box {
       display: none;
   }
   .details:focus-within .summary {
       background-color: #fff;
   }
   .details:focus-within .box {
       display: block;
   }Copy the code

Cast out bricks to attract jade.

Thanks for reading and welcome to exchange!

Display my exclusive purchase code

// Want a tip? Click here. Got something to say? Click here.

x

Implement various interactive effects with HTML5 Details, Summary and JS free

0