如何将内部阴影分配给 CSS 中的输入

Question

在 CSS 或 JS 中，有什么方法可以将内部阴影分配给文本框吗？

我测试了文本框的外阴影，没问题。

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

但是当我想为文本框分配内部阴影时，它在 Firefox 中不起作用。它适用于 Chrome.

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

我该怎么做？

回答

谢谢大家。我现在自己找到了答案。我使用了 -moz-box-shadow 和 -webkit-box-shadow 但在 Firefox 中没有输入，但如果我删除文本框的 border 它将在 Firefox 中分配内部阴影。

像这样：

style="border:none;"

屏幕截图：（在 Firefox 中）

使用appearance: none;和-moz-appearance: none;时的输入阴影：

仅使用border: none;时的输入阴影：

Answer 1

如果您使用的是 firefox，请将 -moz 前缀添加到您的 box-shadow。

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

但这只适用于旧的 firefox 浏览器，因为新的 13< 不支持 -moz 前缀。

Answer 2

似乎必须在 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" />

如何将内部阴影分配给 CSS 中的输入

How to assign inner shadow to inputs in CSS

css

firefox

input

shadow