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

最近我正在开发一个Q &一个网站，如stackoverflow.com。但是，当我尝试实现阴影样式，同时通过在HTML <输入区>区域中输入标签来为问题添加标签时，我感到困惑。我想知道我应该使用哪些工具使我的<输入区>区域中的每个标记都被阴影化，因为在<输入区区域中CSS样式无用，以及如何操作？如何将阴影添加到在输入区域中键入的标签？

一个简单的例子，下面列出这只是计算器的标签输入查询区域：

Example

感谢您的帮助。

来源

2016-11-26 Xiangyi Meng

您当前的工作代码请 –

@Xiangyi Meng别忘了打勾它=>如果回答是有用的 –

只是看看我在问题中添加的例子...而且你会知道我想要什么.. 。谢谢T_T –

您可以使用box-shadow：inset来达到此目的。如果你想给阴影文本使用文字阴影

更多检查此link。我在下面添加了一个示例。

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">

来源

2016-11-26 10:47:30

感谢您的回答，但我只是想让我的标签在输入区域内阴影...不是输入框本身...还有其他建议吗？ –

@XiangyiMeng现在检查，我正在更新 –

哇，这是接近我的目的地...... Thx你...但我可以让我的标签输入区域像在stackoverflow？也许这对我来说有点难... :( –

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

来源

2016-11-26 10:50:34 kumarsher45

感谢您的回答......但我只是想让我的标签在输入区域内阴影...不是输入框本身...还有其他建议吗？ –

请显示你的代码 – kumarsher45

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

来源

2016-11-26 10:55:06 aje

你需要text-shadow吧：

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

也看看这里的some generators来帮助你

来源

2016-11-26 10:55:22 candidJ

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

来源

2016-11-26 11:13:39

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

回答

相关问题