如何在输入区域中键入的标签上添加阴影？

Question

最近，我正在开发一个诸如stackoverflow.com之类的问答网站。 但是，当我尝试通过在HTML <input>区域中键入标签来向问题添加标签时，尝试实现阴影样式时，我感到困惑。 我想知道应该使用哪些工具来使<input>区域中的每个标记都变暗，因为CSS样式在<input>区域中是无用的，并且该怎么做？

下面列出了一个简单的示例，这只是stackoverflow的标签输入区域：

例

谢谢你的帮助。

Answer 1

您可以为此使用box-shadow：inset 。 如果您想给文本阴影，请使用文本阴影

有关更多信息，请检查此链接 。 我在下面添加了一个示例。

 input{ box-shadow:inset 1px 1px 5px #000; text-shadow:1px 1px 5px green; width:300px; height:200px; font-size:20px; font-weight:400; } 

 <input type="text"> 

Answer 2

 <style> #yourid{ box-shadow:inset 0px 5px 5px #666666; } </style> <input type="text" id="yourid"> 

Answer 3

使用text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);

Answer 4

您需要它的text-shadow ：

input{
     color: white;
    text-shadow: 2px 2px 4px #000000;
}

也可以在这里寻找一些发电机来帮助您

Answer 5

感谢所有答复者。 根据@vsync的提示。 我使用Tagify来实现我的需求。 该插件完全可以满足我的要求。