CSS旋转按钮跨浏览器，适用于Chrome浏览器，但不适用于Firefox/Safari浏览器

我有这个旋转上/下按钮在Google Chrome（Mac OS）中完美工作，但是当我用Safari打开它时，它有点偏离网格，并在Firefox中完全消失。CSS旋转按钮跨浏览器，适用于Chrome浏览器，但不适用于Firefox/Safari浏览器

任何人都可以帮助的CSS？感谢您的帮助

铬（CSS工作真的很好）：

Safari浏览器（从输入字段那种关）：

火狐（未示出在所有？）：

/* 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>

来源

2017-06-07 Daniel H

按，MDN此功能是非标准的，并且没有被一个标准的轨道。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为在未来可能会发生变化。

你仍然可以做这样的事情的Firefox（这不会对铬工作）：

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>

希望这有助于！

来源

2017-06-07 19:02:32

CSS旋转按钮跨浏览器，适用于Chrome浏览器，但不适用于Firefox/Safari浏览器

回答

相关问题