0

I created a custom number spinner/increment arrows which worked fine for months. But recently, in Chrome, they don't position properly and are not functioning. The symbols are reversed (see fiddle). They look fine in Safari, don't appear in Firefox (I'm fine with that) but I can't seem to find the problem in the CSS.

Example 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);
}
EtTuBrute
  • 111
  • 3

1 Answers1

0

I believe your issue is related to inconsistencies with how browsers handle transform. More on that subject by the mad scientist Jack Doyle (http://greensock.com/svg-transforms)

I'd stay away from that issue for a few years.

Instead, eliminate your transform:rotate(180deg) and use different arrow characters for the :before and :after

Also, I can see that there are some display issues with the up and down arrows. Here is a huge discussion with a lot of options...
What characters can be used for up/down triangle (arrow without stem) for display in HTML?

Community
  • 1
  • 1
Joe Hakooz
  • 573
  • 1
  • 5
  • 18
  • Although I've removed the transform, chrome is still placing the symbols in the reverse positions to safari (or vice versa?). It seems to apply the :before and :after differently. – EtTuBrute Jan 10 '15 at 10:42
  • I've also discovered that the spinner buttons won't work in chrome while they have -webkit-appearance: none applied. I'm thinking it will be easier to abandon them...? – EtTuBrute Jan 10 '15 at 10:44
  • Going from memory here... I think you just need to double check your top and bottom styles. But I'm not familiar at all with the appearance style so yeah maybe a different approach is in order. But I like your CSS only thinking! – Joe Hakooz Jan 11 '15 at 00:48