Question

我试图将一些CSS应用到bootstrap输入字段，但不知怎的，我无法看到box-shadow。当我在Chrome中检查元素时，似乎CSS box-shadow已应用于该字段，form-control的CSS已被覆盖。我如何定义输入字段有什么问题吗？有人可以帮忙吗？非常感谢！

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

插入框阴影似乎在你的例子中起作用，因为你的颜色声明中有0.12，所以它非常微弱。增加不透明度是否有帮助，例如将其设置为0.5而不是0.12？

初步回复：

CSS中的ID（#payment_amount）与HTML中的ID（#amount）不匹配，因此无法应用。将样式应用于.form-control或者您只是想将它应用于这个特定字段会更好吗？

Answer 2

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

你可以使用它。

Answer 3

只需要为规则添加更多层次结构，然后它就不会被Bootstrap样式覆盖...

像这样写......

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

那应该够了。

Box shadow不适用于Bootstrap输入字段

3 个答案: