Цвет входного фона разрушает стиль?

Я создаю форму, которая проверяется под jQuery Validation. Я хочу применить светло-красный цвет фона к входам, которые являются недопустимыми и должны быть исправлены.

Когда я применяю background-color: #FFCCCC; к входу, привлекательный стиль кажется удаленным, и жесткая граница заменяет его. Например, с текстовым входом в Firefox:

Стилированный и неровный ввод текста http://liranuna.com/strager/b/textbox-difference.png
(Live demo)

Это происходит с несколькими браузерами. Это также происходит, если я устанавливаю любой background, отличный от #FFFFFF.

Есть ли способ сохранить стиль при использовании цвета фона?

Я открыт для решений Javascript, которые каким-то образом подражают стилю.

Ответ 1

Извините - любой тип стилей на элементах ввода, как правило, разрушает их значения по умолчанию для ОС/браузера. Входы по умолчанию отображаются совершенно по-другому - не так, как они, к сожалению, кодируются в браузере как стили CSS.

Лучше всего здесь сделать, а не пытаться сделать ваши красно-фонные входы эмуляцией нормальных, создать свой собственный привлекательный стиль! Если вам нравятся эти световые границы, используйте border: 1px #ccc solid. Если вам нравятся круглые углы, используйте border-radius и -moz-border-radius - для тех, кто находится на грани развития браузера, они будут иметь их. Для тех, кто этого не делает, они не заметят разницы.

Короче говоря, не пытайтесь вставлять входы в среду ОС, а скорее стилизовать их на свой собственный сайт. Это создаст лучший дизайн для вашего сайта в целом:)

Ответ 2

Я бы сказал, что по умолчанию (Windows 2000) внешний вид элементов управления проще реализовать для поставщиков браузеров. Браузер должен рисовать все сам, включая любые элементы управления. То, что они выглядят родными по своему стилю по умолчанию, является лишь небольшим удобством для пользователя, но без чего-то действительно причудливого (и тяжеловеса), такого как WPF, быстро становится неудобно правильно рисовать элемент управления с использованием визуальных стилей ОС и CSS.

Точный стиль также зависит от ОС, поэтому решение, дающее вам ровно один взгляд, может быть не тем, что хотят большинство посетителей вашего сайта. Опять же, используя только CSS, вы можете достичь One Look ™. Если это так, похоже, будет выглядеть как родной на конкретной ОС, ну и так: -)

То, что вы ищете, возможно, можно немного эмулировать, используя светло-серая рамка и наведите/сфокусируйте светло-голубой, эмулируя внешний вид Aero Vista и Windows 7.

Ответ 3

Короткий ответ: нет.

Браузеры и элементы управления формами, без сомнения, являются самой непоследовательной частью CSS. Все, что я могу предложить, это использовать границу 1px для полей ввода, так как большинство браузеров используют что-то похожее на это. CSS3 закругленные углы также должны работать в нескольких браузерах.

input.text {
  border: 1px solid #ccc;
  background-color: #fcc;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

Вы найдете эту страницу на 456 Berea Street. Он демонстрирует, как каждый браузер применяет разные стили в текстовых полях.

Ответ 4

Здесь браузер использует свой стиль по умолчанию.

Я бы предложил добавить что-то вроде следующих CSS для BOTH-входов, тогда они будут выглядеть согласованными.

border: solid 1px #ccc;

Ответ 5

Проверьте, какие стили получает нормальное поле ввода для границы. И примените это к ошибке также.

Ответ 6

Измените свой HTML так:

<p><input type="text" value="text" style="border:1px solid #999999;" /></p> 
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>

Изменить. Если вы хотите, чтобы он выглядел согласованным во всех браузерах и не только слегка округлен в Mozilla, вам нужно будет сделать гораздо больше работы. Здесь ссылка, которая покажет вам, как полностью переопределить стиль текстового поля.