刪除文字輸入的內部陰影

所以我有一個文本輸入，即時通訊使用html5，在鉻上，我想改變文本輸入的外觀，我已經刪除了焦點上的輪廓（鉻上的橙色），我將背景設置爲淺色#f1f1f1，但現在在頂部和左側有一個較厚的邊框，就像它看起來被推入一樣，當背景顏色沒有變化時，這種情況不會發生。我如何刪除它？抱歉，我無法在移動設備上提供圖片。刪除文字輸入的內部陰影

它發生在Chrome上，也就是說，Firefox不能測試任何其他。

來源

2012-10-09 FabianCook

border-style:solid;將覆蓋inset風格。這是你問的。

border:none將一起移除邊框。

border-width:1px將設置它有點像背景變化之前。

border:1px solid #cccccc更具體，適用於所有三種，寬度，款式和顏色。

實施例：https://jsbin.com/quleh/2/edit?html,output

來源

2012-10-09 01:28:50

第一行「border-style：solid」是這個問題的最佳答案。 – charleslparker

border-style：沒有答案是找 –

添加border: none或border: 0刪除邊框，或border: 1px solid #ccc使邊框變薄和平坦。

要刪除鬼填充在Firefox中，你可以使用::-moz-focus-inner：

::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

見live demo。

來源

2012-10-09 01:24:28

當我做到這一點沒有邊框，是的，但是當我設置邊框爲1px和顏色設置爲黑色只在兩側設置。另一個是白色的。 – FabianCook

設置border: 1px solid black使所有側面等於並移除任何類型的自定義邊框（實體除外）。此外，請設置box-shadow: none以刪除應用於其上的任何插入陰影。

來源

2012-10-09 01:27:11

如果我將邊框設置爲任何其他顏色，可以說#eee，只有兩面仍在設置 – FabianCook

看看我的更新。您可能需要更改邊框樣式和大小，以「固定」和「1px」。 –

謝謝。我的基礎是你的。 – FabianCook

這是爲移動Safari溶液：

-webkit-外觀：無;

如下建議：Remove textarea inner shadow on Mobile Safari (iPhone)

來源

2014-09-10 16:55:13 Owen

的解決方案都不是目前的工作。這是我的解決方案。您可以添加前綴。

box-shadow: inset 0px 0px 0px 0px red;

來源

2015-11-22 01:43:08 atilkan

這是目前唯一的解決方案 – andreaem

我正在使用firefox。和我有同樣的問題，輸入類型文本是自動定義的東西看起來像boxshadow插入，但它不是。你想改變的是邊界...只是設置border:0;，你就完成了。

來源

2016-10-15 22:12:33

試試這個
outline: none;

現場演示https://codepen.io/wenpingguo/pen/KQgbXq

來源

2018-02-07 05:06:26 user1506075

刪除文字輸入的內部陰影

回答

相關問題