如何在CSS中爲內部陰影分配輸入

是否有任何方法將內部陰影分配給CSS或JS中的文本框？如何在CSS中爲內部陰影分配輸入

我測試了文本框的外部陰影，沒關係。

input { 
    box-shadow: 10px 10px 5px #888888; 
}

但是，當我想分配內部陰影文本框它不起作用的Firefox。它適用於Chrome。

input { 
    box-shadow: inset 10px 10px 5px #888888; 
}

我該怎麼做？

ANSWER

謝謝大家。我現在自己找到了答案。我使用-moz-box-shadow和-webkit-box-shadow，但在Firefox中不適用於輸入，但如果我刪除文本框的border，它將爲Firefox分配內部陰影。

像這樣：

style="border:none;"

截圖：（在Firefox）

時appearance: none;和-moz-appearance: none;用於輸入陰影：

輸入陰影裏，只是border: none;是使用：

來源

2015-10-06 MojtabaSh

是它在做鉻的工作，但我需要在Firefox – MojtabaSh

它的工作原理，因爲Firefox的18個工作無前綴。我們是在火狐41 .....你錯過了一些東西，或者你不告訴我們一切。這是一個移動設備？ –

似乎Firefox的默認外觀必須在插入box-shadow才能正常工作。

input { 
 
    box-shadow: inset 10px 10px 5px #888888; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    border-width: 0; /* if you don't want the border */ 
 
}

<input type="text" />

來源

2015-10-06 08:25:35 Harry

Thanks @Harry你的代碼在爲顯示內部陰影做工作，但在文本框周圍出現像按鈕邊框那樣的玻璃邊框，再次感謝 – MojtabaSh

@MojtabaSh：對不起，我無法理解它的含義。你可以張貼截圖嗎？另外，如果你不需要邊框，我們可以將'border'設置爲none或者'border-width'設置爲'0'。 – Harry

@MojtabaSh：好的，通過查看所提供的屏幕截圖，我瞭解了你的意思。像上面提到的那樣設置'border-width：0'或者像你自己所做的那樣''border：none''會擺脫邊界。順便說一下，不要在問題本身添加答案。您可以發佈自己的答案並接受它（或）接受已發佈的答案之一。 – Harry

如果你使用Firefox -moz前綴添加到您的box-shadow。

-moz-box-shadow：inset 2px 5px 3px;

但是，這隻適用於舊的火狐瀏覽器，因爲新的13 <不支持-moz前綴。

來源

2015-10-06 08:20:27 Paran0a

謝謝，但是我用了-moz-boz-shadow並且不用太工作 – MojtabaSh

你可以創建一個你的例子的jfiddle嗎？並給你使用的firefox我們的版本。 – Paran0a

如何在CSS中爲內部陰影分配輸入

回答

相關問題