The best scheme of adding and subtracting digital buttons in CSS

Time:2020-10-2

preface:

For the realization of digital addition and subtraction button, many schemes have been used before, such as:

1. Use background image – this effect is better, but the disadvantage is that the style control is a little complicated, and pictures are needed;

2. Directly using “+” – “- this method is simple and crude and easy to implement. The disadvantage is that the display is slightly different in different browser environments, and the line thickness of symbol size machine is not easy to adjust;

3. The use of Unicode characters is almost the same as method 2, and the compatibility is not good. Some mobile phones do not display the characters;

4. use CSS style, use tags to generate horizontal and vertical positioning of absolute positioning, and then adjust their location to synthesize the plus sign. The disadvantage is that different browsers may have a slight mismatch in horizontal and vertical collocation. In this case, the label can be used to generate two identical horizontal lines, and then one of them is rotated by 90 degrees, which will achieve better results;

For the above, it can be said that the best is the first use of pictures, although it is a bit troublesome, but the effect is the best, do not worry about compatibility, the other is not recommended to use.

Recently found a new method, is to use CSS3background-image Style with linear gradientlinear-gradient Synthesis plus sign, the specific implementation is as follows.

Key code:

<a href="javascript:" class="btn btn_ Plus "role = button" title: "added" > "</a>
<input class="inputNum" value="1" size="1">
<a href="javascript:" class="btn btn_ Minus "role = button" title: "decrease" > "</a>
.inputNum {
    vertical-align: middle;
    height: 22px;
    border: 1px solid #d0d0d0;
    text-align: center;
}
.btn {
    display: inline-block;
    vertical-align: middle;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    box-shadow: 0 1px rgba(100, 100, 100, .1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100, 100, 100, .1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn_plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn_minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

 

Among them, the key styles are bold at both ends. After verification, the compatibility of this method is relatively good, which can be said to be the same as H5 / CSS3 compatibility.

It can be said that this is the simplest way to realize it. I admire the man who thought of this usage.

summary

The above is the best scheme of pure CSS to realize the digital addition and subtraction button. I hope it will be helpful to you. If you have any questions, please leave me a message, and the editor will reply to you in time. Thank you very much for your support to the developeppaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!