更改边框颜色并删除框阴影

Question

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

我尝试了以下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>

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

Answer 2

这会改变您的边框颜色：

input{
 border:1px solid red;
}

这将删除焦点：

input:focus{
    outline: 0;
}

请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/88z7u4kf/4/

Answer 3

删除框阴影：

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

删除轮廓（不是边框）：

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