Question

我创建了一个自定义数字微调器/增量箭头，可以正常运行数月。但最近，在Chrome中，它们没有正确定位并且无法正常运行。符号相反（见小提琴）。它们在Safari中看起来很好，不会出现在Firefox中（我很好），但我似乎无法在CSS中找到问题。

示例JSFiddle：http://jsfiddle.net/0kLt81c5/3/

input[type=number]::-webkit-inner-spin-button { 
-webkit-appearance: none;
cursor:pointer;
display:block;
right: 50px;
width:20px;
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;
    font-size: .7em;
    right: 4px;
}
input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

Answer 1

我认为您的问题与浏览器处理转换的方式不一致有关。更多关于疯狂科学家杰克·多伊尔（http://greensock.com/svg-transforms）

的话题

我已经远离这个问题几年了。

相反，消除你的变换：旋转（180度）并使用不同的箭头字符：before和：after

另外，我可以看到向上和向下箭头有一些显示问题。这是一个有很多选择的大讨论...... What characters can be used for up/down triangle (arrow without stem) for display in HTML?

自定义数字微调器仅在Chrome中表现奇怪

1 个答案: