更改边框颜色并移除框阴影答案

【问题标题】：Changing border colour and removing box shadow更改边框颜色并移除框阴影
【发布时间】：2015-09-03 22:50:11
【问题描述】：

我正在尝试移除框阴影并更改边框颜色：

我尝试了以下 CSS 代码但没有成功：

.selector.noshadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

如何删除它并将边框颜色从蓝色更改为红色？谢谢

编辑 - HTML：

    <div class="form-group col-sm-3 col-sm-offset-3" style="background-color:#dcdcdc; padding:1em;">
        <div>
            <label for="createPassword">Create Password:</label>
            <input type="password" class="form-control" id="inputCreatePassword" placeholder="Enter a password" ng-model="createPassword">
        </div>
    </div>

【问题讨论】：

嘿，我们还需要盒子的 HTML 以确保您不会遗漏任何东西（一个小 sn-p 头脑，而不是整个页面）。理想情况下 - jsfiddle
虽然这不是最佳做法，但请尝试在您的属性之后添加 !important。可能会重写默认样式。
我看不到图像，所以我可能无法理解问题所在，但无论如何，我建议您这样做：如果您使用的是 Windows 计算机，请右键单击带有不需要的 box-shadow 并从上下文菜单中选择“检查元素”。这将打开开发人员工具包，在右侧窗格中，您将看到当前影响元素的所有 CSS 及其来源。然后，您可以在源代码处对其进行修改，而不是尝试使用其他 CSS 覆盖它。
@ScottMcGready 您可能正在寻找JsFiddle.net。 ;)
@Singular1ty 只是确保每个人都在关注

标签： html twitter-bootstrap css

【解决方案1】：

这是来自 Bootstrap 的有问题的 CSS：

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

您需要像这样覆盖这些样式：

#inputCreatePassword:focus {
  border-color: #ccc;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

【讨论】：

【解决方案2】：

这将改变您的边框颜色：

input{
 border:1px solid red;
}

这将移除焦点：

input:focus{
    outline: 0;
}

见小提琴：https://jsfiddle.net/DIRTY_SMITH/88z7u4kf/4/

【讨论】：

【解决方案3】：

去除盒子阴影：

.selector.noshadow {
box-shadow : none;
}

去除轮廓（不是边框）：

#inputCreatePassword {
outline-width : 1px;
outline-color : red;
outline-style : solid;
}

【讨论】：