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瀏覽器

回答

相關問題