Ale*_*har 47
更新17/03/2017
原始解决方案将不再适用.旋转器是影子dom的一部分.现在只是隐藏在chrome使用中:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}<input type="number" />或总是显示:
input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}<input type="number" />您可以尝试以下操作,但请注意,这仅适用于Chrome:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
content: "^";
position:absolute;
right: 0;
}
input[type=number]::-webkit-inner-spin-button:before {
top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
bottom:0px;
-webkit-transform: rotate(180deg);
}<input type="number" />- 非常好的功能 (2认同)
sag*_*aei 25
对于mozila
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
适用于Chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
与其他答案略有不同,使用类似的概念但div而不是伪类:
input {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 20px;
padding: 0px;
font-size: 14pt;
border: solid 0.5px #000;
z-index: 1;
}
.spinner-button {
position: absolute;
cursor: default;
z-index: 2;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin: 0px;
pointer-events: none;
height: 10px;
line-height: 10px;
}
#inc-button {
left: 46px;
top: 10.5px;
}
#dec-button {
left: 46px;
top: 20.5px;
}<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>疯狂的想法...
您可以使用一些伪元素，并创建 css 内容十六进制代码的向上/向下箭头。唯一的挑战是精确定位箭头，但它可能有效：
input[type="number"] {
height: 100px;
}
.number-wrapper {
position: relative;
}
.number-wrapper:hover:after {
content: "\25B2";
position: absolute;
color: blue;
left: 100%;
margin-left: -17px;
margin-top: 12%;
font-size: 11px;
}
.number-wrapper:hover:before {
content: "\25BC";
position: absolute;
color: blue;
left: 100%;
bottom: 0;
margin-left: -17px;
margin-bottom: -14%;
font-size: 11px;
}<span class='number-wrapper'>
<input type="number" />
</span>- 确实很好尝试@LcSalazar，但有一些问题。当您精确单击箭头时，它不起作用。此外，当您将鼠标移出并保持焦点时，也会显示默认值。不过+1:) (6认同)
我修改了@ LcSalazar的答案......它仍然不完美,因为默认按钮的背景仍然可以在Firefox,Chrome和Opera中看到(未在Safari中测试); 但点击箭头仍然有效
笔记:
- 添加
pointer-events: none;允许您单击重叠按钮,但是在悬停时您无法设置按钮的样式. - 箭头在Edge中可见,但不起作用,因为Edge不使用箭头.它只添加一个"x"来清除输入.
.number-wrapper {
position: relative;
}
.number-wrapper:after,
.number-wrapper:before {
position: absolute;
right: 5px;
width: 1.6em;
height: .9em;
font-size: 10px;
pointer-events: none;
background: #fff;
}
.number-wrapper:after {
color: blue;
content: "\25B2";
margin-top: 1px;
}
.number-wrapper:before {
color: red;
content: "\25BC";
margin-bottom: 5px;
bottom: -.5em;
}<span class='number-wrapper'>
<input type="number" />
</span>我一直在手机和平板电脑上为此苦苦挣扎。我的解决方案是absolute在微调器上使用定位，所以我只是发布它以防它对其他人有帮助：
<html><head>
<style>
body {padding: 10px;margin: 10px}
input[type=number] {
/*for absolutely positioning spinners*/
position: relative;
padding: 5px;
padding-right: 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
</style>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
</head>
<body >
<input type="number" value="1" step="1" />
</body></html>