Изменить цвет ввода текста

Question

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

HTML код:

<label>Question: </label><input type = "text" maxlength = "100" name = "question"> <br /> 

JavaScript код 1:

fields[i].style.borderColor = "red"; 

JavaScript код 2:

fields[i].style.border = "1px solid red"; 

Если я использую JS код 1, граница меняет свой цвет, но это имеет ширину больше, чем раньше (хотя я ничего не говорю о ширине границы). Если я использую JS-код 2, текстовый ввод сжимается с 2px, и это изменение заметно.

Что мне сделать, чтобы изменить только цвет рамки?

Answer 1

Попробуйте это. Jquery

$("input").change(function() 
    { 
    var value = this.value; 
    if(value=="") 
    { 
      $(this).css("border", "1px solid red"); 
    }else 
    { 
     $(this).css("border",''); 
    } 
    }).trigger("change"); 

Html

<input type="text" class="col"> 

Answer 2

На самом деле это является предпочтительным путем добавления и удаления классов:

$("input").change(function() 
    { 
    var value = $(this).val(); 
    if(value=="") 
    { 
      $(this).addClass("red-border"); 
      $(this).focus(); 
    }else 
    { 
      $(this).removeClass("red-border"); 
    } 
    }); 

И ваш CSS:

.red-border{ 
    border: 1px solid red; 
} 

Answer 3

У меня есть что-то подобное в производства, только он использует оповещения вместо изменения цвета. Использование стилей CSS & классы:

CSS

.error { 
    border:2px solid red; 
} 

JavaScript

<script> 
function checkField(){ 
    var f = document.getElementById('<name of field>').value; 
    if (f === "") { 
     document.getElementById('<name of field>').className = document.getElementById('<name of field>').className + " error"; 
     return false; 
    } 
} 
</script> 

Затем добавить это событие щелкните кнопкой/элемента управления:

return checkField() 

Этот SO пост, кажется, похожие: changing textbox border colour using javascript

Answer 4

по умолчанию стилей агента пользователя использует это для поля ввода:

border: 2px inset; 

Теперь вы можете спросить почему это не определено по умолчанию?

по умолчанию (в Т.Е. appreance жестко закодированы):

appearance: textfield; 

Но всякий раз, когда вы что-то изменить:

appearance: none; 

И когда appearance его нет, вы увидите 2px врезка границы.

Так собственно ширина здесь проблема:

Так что вы хотите изменить 2 СВОЙСТВ: Border-width и border-color
Вам нужно будет 2 строки сейчас:

document.getElementsByTagName('input')[0].style.border = "red"; 
document.getElementsByTagName('input')[0].style.borderWidth = "1px"; 

jsFiddle

Однако ваше собственное решение может быть элегантным, так как оно определяется одной строкой кода:

fields[i].style.border = "1px solid red"; 

---

Обратите внимание, что стиль врезки устанавливает верхний и правую границу легче, где нижнее и левая граница данного цвета. Установка стиля на твердое будет решить эту проблему.

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

Answer 5

Используйте контур вместо границы.

fields[i].style.outline = "1px solid red";