首頁 > web前端 > css教學 > 主體

以下是一些適合您文章內容的基於問題的標題: * 如何始終顯示數字輸入的向上/向下箭頭? * 您可以在所有瀏覽器中強制在數位輸入上使用向上/向下箭頭嗎?

Barbara Streisand
發布: 2024-10-26 15:09:03
原創
295 人瀏覽過

Here are a few question-based titles that fit the content of your article:

* How to Always Display Up/Down Arrows for Number Inputs? 
* Can You Force Up/Down Arrows on Number Inputs in All Browsers?
* Making Number Input Arrows Visible: CSS Solutions
* U

您可以始終為輸入數字顯示向上/向下箭頭嗎?

希望輸入欄位具有向上和向下箭頭是很常見的類型為「數字」。預設情況下,情況並非總是如此,那麼如何實現這一目標?

基於CSS 的方法

如果您使用的是Chrome,您可以嘗試使用-webkit-appearance 屬性:

<code class="CSS">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: "Always Show Up/Down Arrows";
}</code>
登入後複製

但是,🎜>但是,這種方法可能無法在所有瀏覽器中一致地運作。

不透明度解決方案

替代方案更廣泛支持的是調整不透明度屬性:

<code class="CSS">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}</code>
登入後複製

這種方法本質上使箭頭始終可見,即使它們最初沒有顯示。

以上是以下是一些適合您文章內容的基於問題的標題: * 如何始終顯示數字輸入的向上/向下箭頭? * 您可以在所有瀏覽器中強制在數位輸入上使用向上/向下箭頭嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板