箱子阴影不起作用在自举输入字段

我想应用一些CSS到自举输入字段，但不知何故我看不到box-shadow。当我检查Chrome中的元素时，似乎CSS box-shadow已应用于该字段，并且form-control的CSS已被覆盖。我如何定义输入字段有什么问题吗？有人可以帮忙吗？非常感谢！箱子阴影不起作用在自举输入字段

#amount { 
 
    min-width: 56px; 
 
    width: 224px; 
 
    height: 40px; 
 
    border-radius: 3px; 
 
    background-color: #ffffff; 
 
    box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.12); 
 
    border: solid 1px #e2e2e2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-lg-4 col-lg-offset-4"> 
 
    <div class="input-group"> 
 
    <span class="text-center input-group-addon" id="sizing-addon2">Payment amount</span> 
 
    <input class="form-control" type="text" id="amount" value="1.00"> 
 
    </div> 
 
</div>

来源

2017-02-16 user4046073

插图框阴影似乎是工作在你的榜样，这是因为在你的颜色声明中0.12的只是非常微弱。如果增加不透明度，它会有帮助吗，例如将其设置为0.5而不是0.12？

初始响应：

在你的CSS（#payment_amount）不符合在你的HTML（#amount）的ID的ID，所以它不会被应用。将样式应用于.form-control会更好吗，还是只希望将其应用于此特定字段？

来源

2017-02-16 02:33:33 AlxTheRed

谢谢！我很抱歉，这是一个错字。我现在改变了它。它仍然不起作用。是的，我只想把它应用到这个领域。 – user4046073

插入框阴影似乎在您的示例中工作，它只是非常微弱，因为您的颜色声明中的0.12。如果将它设置为0.5，这有帮助吗？ – AlxTheRed

感谢您的评论！是的，这是问题所在。如果您将其移至答案，我会接受 – user4046073

box-shadow: -1px 3px 12px rgba(187, 195, 197, 0.6);

你可以使用这个。

来源

2017-02-16 02:41:16

谢谢你，但那个影子似乎是向外而不是在那个输入区域内。你如何将我提供的价值转化为答案中的价值观？ – user4046073

对于你里面的影子可以这样做box-shadow：inset 0 0 10px＃000000; –

但这就像我发布的问题没有工作... – user4046073

只是需要更多的层次结构添加到规则中，然后它不会在由引导的风格写...

写这样的...

box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.12) !Important;

应足够。

来源

2017-02-17 03:47:51 imjaroiswebdev

箱子阴影不起作用在自举输入字段

回答

相关问题