Входной цвет фона разрушает стилизацию?

Question

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

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

Ввод текста в стиле и без стиля http://liranuna.com/strager/b/textbox-difference.png
( Живая демоверсия )

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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

border: solid 1px #ccc;

Answer 5

Измените свой 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, вам придется проделать гораздо больше работы. Вот ссылка , которая покажет вам, как полностью переопределить стиль текстового поля.

Answer 6

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