Question

我正在尝试扩展Bootstrap。我不想触摸任何Bootstrap核心文件，因此我创建了自己的styles.scss并且在那里我有以下内容：

@import "custom/variables";

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

@import "custom/modular-styles";

在_variables.scss我会覆盖一些变量（例如摆脱圆角）。

在_modular-styles.scss我调用了我想要自定义的各种其他SASS部分（例如_forms.scss）。

在_forms.scss这里是我所做的：

.form-control {
    display: block;
    width: 100%;
    height: $input-height-base;
    padding: $padding-base-vertical $padding-base-horizontal;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $input-color;
    background-color: $input-bg;
    background-image: none;
    border: 1px solid $input-border;
    border-radius: $input-border-radius;
    box-shadow: none; // this use to be @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
    @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
    outline: none; // this use to be @include form-control-focus;

    @include placeholder;

    &::-ms-expand {
        border: 0;
        background-color: transparent;
    }

    &:focus {
        outline: none;
    }

    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        background-color: $input-bg-disabled;
        opacity: 1;
    }

    &[disabled],
    fieldset[disabled] & {
        cursor: $cursor-disabled;
    }
}

不应该这样吗？然而，当输入在:focus

时，我仍然看到轮廓发光

Answer 1

Bootstrap中的焦点发光由：焦点上的方框阴影给出，如下所示：

.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);
}

如果你想修改焦点样式，请添加如下：

.form-control {

  &:focus {
     box-shadow: none;
     /* your new styles */
  }

}

Answer 2

尝试添加以下CSS：

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

Answer 3

从我记得，你需要覆盖:focus伪类中的轮廓，而不仅仅是主要的css类

.form-control {
    ...
    &:focus {
        outline: none;
    }
}

请参阅：How to remove the border highlight on an input text element

Answer 4

您可以通过覆盖sass变量来做到这一点：

$input-box-shadow: none;
$input-focus-box-shadow: none;
$input-btn-focus-box-shadow: none;

如果这样做不能解决问题（我已经看到文件排序有些奇怪的行为）：

.form-control {
  &:focus {
    box-shadow: none !important;
  }
}

只是一个提示，但请确保仅导入一次Bootstrap。一旦我忘记将其从我的angular.json（以前的angular-cli.json）中删除，这引起了冲突。

Answer 5

尝试添加以下CSS

.form-control:focus {
  box-shadow: none;
}

说明：在Bootstrap中，box-shadow的值在输入标签聚焦时发生了变化，因此transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out起作用了。

希望有帮助。

如何摆脱使用Chrome / Firefox的Bootstrap SASS中的输入发光？

5 个答案: