Цвет рамки в стиле ввода по умолчанию

вот сложный вопрос...

У меня есть стандартные поля ввода по умолчанию (добавлено не css, просто ширина/высота/дополнение), но теперь я хочу дать ему красную рамку (стиль ошибки). Как я могу это сделать? Просто установив границу, вы удалите стиль ввода по умолчанию, установив только пограничный цвет, будет выглядеть странно, настройка контура будет работать в некоторых случаях (и не выглядит так хорошо в Firefox).

Любые советы?

EDIT: Приходите, ребята, прочитайте вопрос, прежде чем отвечать. Мне нужен внешний вид браузера по умолчанию ввода, я просто хочу дать ему красную рамку.

Ответы

Ответ 1

Я бы подумал, что на это уже будет дан ответ - но, конечно же, вы хотите: box-shadow: 0 0 3px # CC0000;

Пример: http://jsfiddle.net/vmzLW/

Ответ 2

Вы можете использовать jquery для этого, используя метод addClass()

CSS

 .defaultInput
    {
     width: 100px;
     height:25px;
     padding: 5px;
    }

.error
{
 border:1px solid red;
}

<input type="text" class="defaultInput"/>

Код JQuery

$(document).ready({
  $('.defaultInput').focus(function(){
       $(this).addClass('error');
  });
});

Update:  Вы можете удалить этот класс ошибок, используя

$('.defaultInput').removeClass('error');

Он не удалит этот стиль по умолчанию. Он удалит только класс .error

Ответ 3

что на самом деле не так:

input { border: 1px solid #f00; }

Вы хотите только его на входах с ошибками? в этом случае введите входной класс ошибки...

input.error { border: 1px solid #f00; }

Ответ 4

Если я правильно понимаю ваш вопрос, это должно решить его:

http://jsfiddle.net/wvk2mnsf/

HTML - создайте простое поле ввода.

<input type="text" id="giraffe" />

CSS - очистите собственный контур, чтобы вы могли установить его собственный, и он не выглядит странным с голубым красным контуром.

input:focus {
    outline: none;
}
.error-input-border {
    border: 1px solid #FF0000;
}

JS - при вводе в поле заданного красного класса границы, объявленного в CSS

document.getElementById('giraffe').oninput = function() { this.classList.add('error-input-border'); }

Здесь также много информации о последних стандартах: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

Ответ 5

Если это приложение Angular, вы можете просто сделать это

input.ng-invalid.ng-touched
{
    border: 1px solid red !important; 
}

Ответ 6

border-color: transparent; граница: 1px сплошной красный;