CSS tourner bouton navigateur croisé, travailler pour Chrome, mais pas pour firefox/safari

Question

J'ai ce bouton tourner vers le haut/bas fonctionne parfaitement dans Google Chrome (mac OS), mais quand je l'ouvre avec Safari, il est un peu hors de la grille , et dans Firefox il est complètement disparu.

Quelqu'un peut-il aider avec le CSS? Merci pour toute aide

Chrome (CSS fonctionne vraiment bien):

Safari (un peu hors du champ d'entrée):

Firefox (ne pas montrer du tout?):

/* style input number spinner */ 
 

 
input[type="number"] { 
 
    position: relative; 
 
    height: 25px; 
 
} 
 

 

 
/* Spin Buttons modified */ 
 

 
input[type="number"]::-webkit-outer-spin-button, 
 
input[type="number"]::-webkit-inner-spin-button { 
 
    -webkit-appearance: none; 
 
    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center; 
 
    width: 1em; 
 
    border-left: 1px solid #BBB; 
 
    opacity: 0.7; 
 
    /* shows Spin Buttons per default (Chrome >= 39) */ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
input[type="number"]::-webkit-inner-spin-button:hover, 
 
input[type="number"]::-webkit-inner-spin-button:active { 
 
    box-shadow: 0 0 2px #0CF; 
 
    opacity: 1; 
 
}

<form> 
 
    <td><input type="number" min="0.001" step="0.001" name="price" value="" required=""></td> 
 
</form>

Answer 1

Conformément, MDN Cette fonction est non standard et non pas sur une piste normes. Ne l'utilisez pas sur des sites de production tournés vers le Web: cela ne fonctionnera pas pour tous les utilisateurs. Il peut également y avoir de grandes incompatibilités entre les implémentations et le comportement peut changer dans le futur.

encore vous pouvez faire quelque chose comme ça pour FireFox (cela ne fonctionnera pas pour le chrome):

div:before, div:after { 
 
    display: block; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 8px; 
 
    line-height: 8px; 
 
    background-color: #ccc; 
 
    left: 136px; 
 
    z-index: 1; 
 
    font-size: 9px; 
 
    text-align: center; 
 
    pointer-events: none; 
 
} 
 

 
div:before { 
 
    content: "▲ "; 
 
    top: 11px; 
 
} 
 

 
div:after { 
 
    content: "▼"; 
 
    top: 20px; 
 
}

<div><input type="number" value="55" min="0" max="100" step="5" /></div>

Hope this helps!