html - Bootstrap 表单输入边缘不会从圆形变为方形

Question

我试图在 bootstrap 中为我的表单输入制作正方形而不是圆形的 Angular ，但我没有运气。 CSS 为按钮工作，但输入表单仍然是圆形的。我在这里做错了什么？

  <form class="navbar-form pull-right">

                    <div class="form-group form-group-sm">

                    <input type="email" class="form-control input" id="email" name="email" placeholder="jane.doe@example.com">
                    </div>

                    <input type="submit" class="btn btn-sm" name="submit" value="Submit" id="submit"/>
                    </div>

                </form>

CSS

 .form-control {
border-radius: 0;
} 

Answer 1

您的 CSS 规则不够具体，无法覆盖 Bootstrap CSS。相反，只需使用:

#email {
    border-radius: 0;
} 

bootply example

要了解有关 CSS 特异性的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity