CSS可以设置数量加减,一般用于购物车等场景。下面介绍一下如何设置:/* 首先,我们需要定义一个input元素 */ input[type= number ] { width: 50px; /* 设置
CSS可以设置数量加减,一般用于购物车等场景。下面介绍一下如何设置:
/* 首先,我们需要定义一个input元素 */ input[type="number"] { width: 50px; /* 设置元素宽度 */ height: 30px; /* 设置元素高度 */ text-align: center; /* 设置文本水平居中 */ border: 1px solid #ccc; /* 设置边框 */ border-radius: 5px; /* 设置圆角 */ font-size: 16px; /* 设置字体大小 */ outline: none; /* 隐藏默认的聚焦边框 */ } /* 接着,我们需要定义加减按钮 */ button { width: 30px; /* 设置元素宽度 */ height: 30px; /* 设置元素高度 */ text-align: center; /* 设置文本水平居中 */ border: 1px solid #ccc; /* 设置边框 */ border-radius: 5px; /* 设置圆角 */ font-size: 16px; /* 设置字体大小 */ outline: none; /* 隐藏默认的聚焦边框 */ cursor: pointer; /* 设置鼠标样式为手型 */ } /* 最后是按钮的样式 */ button:active { background-color: #eee; /* 设置按下后的背景色 */ }
这就是数量加减的设置方法,通过设置input元素和加减按钮的样式,使界面看起来更加美观。如果有需要,还可以增加一些javascript代码实现相应的功能。
粉丝
0
关注
0
收藏
0