表单html中加减数字按钮,纯CSS样式实现数字加减按钮的最佳方案.html

.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;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史