This is the 11th day of my participation in Gwen Challenge

Choose the appropriate mouse cursor

problem

The mouse pointer is useful not only for showing where the mouse is on the screen, but also for telling the user what action can be performed at the moment. This is a very common user experience practice in desktop applications, but is often overlooked in web applications.

The solution

Css3 defines the cursor of the mouse, which can be defined using the cursor property.

Expand the clickable area

problem

For smaller, hard-to-aim controls, expanding the clickable area (hot zone) can often improve usability if the visual size cannot be directly enlarged. No one wants to try and press a tiny button many times, but it happens every day.

There are also times when we want an element to slide in automatically as the mouse approaches a side of the window. For example, an auto-hidden header will slide in from the top and be fully displayed as the mouse approaches. This also involves the issue of enlarging hot areas (in a single direction).

The solution

The easiest way to expand the hot zone is to put a transparent border around it, so we added:

border: 10px solid transparent;
Copy the code

It doesn’t work well, however, as it enlarges the buttons at the same time, because the background spreads to the bottom of the border by default. The simple background-clip property limits the background to the original area:

border: 10px solid transparent;
background-clip: padding-box;
Copy the code

This works well, as shown in the image above. However, when you need to give the button a real border effect and find that the button’s only border property has been removed, you can use an inline drop shadow to simulate a border.

border: 10px solid transparent;
box-shadow: 0 0 0 1px rgba(0.0.0.3) inset;
background-clip: padding-box;
Copy the code

与 border-boxThe difference isbox-shadowMulti-level projections can be specified, separated by commas. But if you combine inline projections with (regular) external projections, you get a weird effect, because external projections are drawn onborder boxExternal.

Borders affect the layout, so this approach is not perfect, so instead of borders, another feature is implemented: pseudo-elements can also respond to mouse interactions on behalf of their host elements.

So, overlay a transparent pseudo-element on top of the button and make the pseudo-element 10px larger than the host element in all four directions:

button {
    position: relative;
    /* [other styles] */
}
button::before {
    content: ' ';
    position: absolute;
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;
}
Copy the code

Customize check boxes

problem

Most form controls can now be styled, but checkboxes and checkboxes are not, and styling is still almost impossible in most browsers.

The solution

Core: When a

Initial code:

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>
Copy the code

Next, we need to generate a dummy element as a beautification check box. First, we add some basic styles to the dummy element:

input[type="checkbox"]+label::before {
  content: '\a0'; /* No newline space */
  display: inline-block;
  vertical-align:.2em;
  width:.8em;
  height:.8em;
  margin-right:.2em;
  border-radius:.2em;
  background: silver;
  text-indent:.15em;
  line-height:.65;
}
Copy the code

On the left is the native check box and on the right is the preliminary defined check box

Now you need to style the checkbox status differently. Styles can be as simple as changing colors and adding checkmarks:

input[type="checkbox"]:checked + label::before {
  content: '\ 2713';
  background: yellowgreen;
}
Copy the code

The pseudo-element now looks like a simple prettified check box, so you need to hide the original check box, but you can’t use display: None because that would remove it completely from the TAB focus queue. Use another method to achieve this goal:

input[type="checkbox"] {
  position: absolute;
  clip: rect(0.0.0.0);
}
Copy the code

The state in which the native checkbox is hidden after beautification

Further optimizations can be made, such as changing its style when it is focused or disabled:

input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 .1em .1em #58a;
}

input[type="checkbox"]:disabled + label::before {
  background: gray;
  box-shadow: none;
  color: # 555;
  cursor: not-allowed;
}
Copy the code

Switch button

An on/off button behaves much like a check box and can be used to toggle an option: pressed when enabled; When disabled, it is floating.

There is no essential semantic difference between an on-off button and a check box, so you can use this technique without worrying about semantics. If you want to use this technique to generate an on/off button, you just need to set the label to the style of the button, and you don’t need to use the pseudo-element.

input[type="checkbox"] {
  position: absolute;
  clip: rect(0.0.0.0);
}

input[type="checkbox"]+label {
  display: inline-block;
  padding:.3em .5em;
  background: #ccc;
  background-image: linear-gradient(#ddd.#bbb);
  border: 1px solid rgba(0.0.0.2);
  border-radius:.3em;
  box-shadow: 0 1px white inset;
  text-align: center;
  text-shadow: 0 1px 1px white;
}

input[type="checkbox"]:checked+label.input[type="checkbox"]:active+label {
  box-shadow:.05em .1em .2em rgba(0.0.0.6) inset;
  border-color: rgba(0.0.0.3);
  background: #bbb;
}
Copy the code

On/off buttons are easily confused with ordinary buttons, making people think that pressing them will trigger an action. Use them with caution.

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.