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

Question

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

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

Есть какие-нибудь советы?

РЕДАКТИРОВАТЬ: Давай, ребята, прочитайте вопрос, прежде чем ответить. Я хочу, чтобы браузер по умолчанию выглядел как ввод , я просто хочу дать ему красную рамку.

Answer 1

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

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

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

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

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

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

Answer 3

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

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

Answer 4

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

input { border: 1px solid #f00; }

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

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

Answer 5

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

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

Answer 6

бордюр: прозрачный; граница: 1px сплошной красный;