Почему я не могу удалить синюю границу textarea в Twitter Bootstrap?

Ответ 1

Вы пишете -webkit-appearance:none; как это:

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:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

Ответ 2

Bootstrap 3

Если вы хотите изменить цвет, измените переменную (рекомендуется):

Меньше или Настройщик

@input-border-focus: red;

variables.less

Sass

$input-border-focus: red;

variables.sass

Если вы не удалите его полностью, вам придется перезаписать Mixin, который устанавливает контур.

.form-control-focus(@color: @input-border-focus) {}

CSS

Если вы используете css, перезапишите его через:

.form-control:focus{
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Ссылка на реализацию

Ответ 3

Я считаю, что тень. Попробуйте следующее:

.box-shadow(none);

Или, если вы не используете LESS:

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

Ответ 4

попробуйте это, я думаю, это поможет, и ваша синяя рамка будет удалена:

outline:none;

Ответ 5

Это сработало для меня

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

Ответ 6

Это работает 100%.

textarea:focus, input[type="text"]:focus,textarea[type="text"]:focus,   input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus,  input[type="color"]:focus, .uneditable-input:focus, .form-control:focus {  
border-color: (your color) or none;
box-shadow:(your color) or none;
outline: (your color) or none;}

Ответ 7

Попробуйте изменить цвет границы на все, что вы хотите

.form-control:focus {
  border-color: #666666;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Ответ 8

Если вы кто-то, кто по-прежнему сталкивается с этой проблемой.

Вот ответ, спасибо Богу.

.radio-custom input[type=radio]:focus+label::before {
    background-image: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Вам интересно, почему другое решение не работает для вас.

Поскольку стиль не был применен к переключателю.

Добавьте этот стиль, вы найдете свой ответ

input[type="text"] {
    margin-left: 10px;
}

label:: before, где вы должны применить свой стиль.

Ответ 9

Это то, что сработало для меня. Все остальные решения для меня не совсем сработали, но я понял одно из других решений, и его стандартные стили textarea и label в комбинации отвечают за синюю границу.

textarea, label
{
    outline:0px !important;

    -webkit-box-shadow: none !important;
}

EDIT: У меня была проблема с текстовым полем Ant Design. Вот почему это решение сработало для меня. Итак, если вы используете Ant, используйте это.

Ответ 10

BOOTSTRAP 4

Если вы не хотите убивать муху с помощью bazooka, используйте -webkit-appearance: none; который также убивает хорошие sliderinputs btw и предположительно, что вы работаете с формой бутстрапа css selector "form-control" для вашего ввода.

Это решение:

.form-control:focus {
    box-shadow: none!important;
    border-color: #ced4da!important;
}

Если вы хотите сохранить крошечный маленький синий контур, выйдите из рамки границы.

Ответ 11

Для справки в будущем вы можете выработать вычисленные стили с помощью инспектора

Ответ 12

Используйте outline: transparent;, чтобы создать схему, как будто она отсутствует, но все же обеспечивает доступность ваших форм. outline: none; будет отрицательно влиять на доступность.

Источник: http://outlinenone.com/

Ответ 13

Лучше всего нажать правой кнопкой мыши > проверить элемент.

Я использую Bootstrap 4, и ни один из предложений не работал до тех пор, пока я не сделал это.

Как только я обнаружил, что соответствующий код находился в окне проверки, я скопировал и вставил соответствующий код, который вызывал синий цвет и фокусировал его.

Это код, который работал в моем css

.btn.focus, .btn:focus
{
outline: 0;
box-shadow: 0 0 0 0;
}

Ответ 14

Bootstrap 4.0

*:focus
{
    box-shadow: none !important;
    border: solid 1px red( any color ) !important;
}

наглядный пример

Ответ 15

Это сработало для меня

input[type=text]:focus{outline: none;}

Я использую bootstrap 3

Ответ 16

Решено использовать это. Работает нормально на бутстрапе 3.x и 4.0

* {
    outline:0px !important;
    -webkit-appearance:none;
}

С помощью этого кода вы собираетесь удалить схему из всех тегов и классов.

Ответ 17

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus
{
    outline: 0px !important;
    border: none!important;
}

* использовать границу: нет; вместо контура, потому что линия фокуса - это граница, а не контур.