Css 自定义数字微调器仅在Chrome中运行异常

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

示例JSFIDLE:

---

我相信您的问题与浏览器处理转换的方式不一致有关。疯狂科学家杰克·道尔（）

我会在几年内远离这个问题

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

此外，我可以看到上下箭头的显示存在一些问题。这里有一个巨大的讨论，有很多选择…

---

虽然我已经删除了转换，但chrome仍然将符号放置在safari的相反位置（反之亦然？）。它似乎以不同的方式应用：before和：after。我还发现，微调器按钮在chrome中无法工作，而它们的-webkit外观：无应用。我想放弃它们会更容易…？从这里的记忆中。。。我想你只需要仔细检查一下你的上衣和下装。但我对外观风格一点也不熟悉，所以是的，也许应该换一种方式。但我只喜欢你的CSS思考！

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);
}