如何一直显示 input 中的增加减少按钮 (CSS 伪元素实现)

要一直显示 input 中的增加减少按钮，你可以使用 CSS 的伪元素:before 和:after 来实现。以下是一个例子：\n\nHTML 代码：\nhtml\n<div class="input-wrapper">\n <input type="number" value="0" min="0" max="10">\n</div>\n\n\nCSS 代码：\ncss\n.input-wrapper input[type="number"]::-webkit-inner-spin-button, \n.input-wrapper input[type="number"]::-webkit-outer-spin-button { \n -webkit-appearance: none; \n margin: 0; \n}\n\n.input-wrapper input[type="number"] { \n -moz-appearance: textfield; \n}\n\n.input-wrapper input[type="number"]:before, \n.input-wrapper input[type="number"]:after { \n content: ""; \n display: block; \n position: absolute; \n width: 16px; \n height: 16px; \n background: #ccc; \n cursor: pointer; \n}\n\n.input-wrapper input[type="number"]:before { \n top: 0; \n left: -20px; \n border-radius: 50% 0 0 50%; \n}\n\n.input-wrapper input[type="number"]:after { \n bottom: 0; \n left: -20px; \n border-radius: 0 50% 50% 0; \n}\n\n\n这段代码会将 input 的 type 设置为 number，并使用 CSS 来隐藏默认的增加减少按钮。然后使用:before 和:after 伪元素来创建自定义的增加减少按钮，通过绝对定位和背景颜色来样式化按钮。\n\n注意，这段代码只适用于 WebKit 浏览器（如 Chrome 和 Safari）。如果你需要在其他浏览器中使用，请添加相应的前缀或使用其他技术来实现。