Jump to content
  • 0

Выделить input, не сбивая дефолтной браузерной темы


SelenIT
 Share

Question

Прикручиваю jquery-вую валидацию к старинной спартанской формочке с дефолтным системным оформлением инпутов, столкнулся с проблемой, как выделить ошибочно заполненные (получившие класс .error). При изменении фона или бордера слетают остальные компоненты XPшной темы и измененные инпуты начинают казаться совсем чужеродными (другие размеры из-за padding-ов, псевдообъемность и т.п.). Outline — хороша, ненавязчиво выделяет, ничего не ломая, но... не работает в IE7 (да, совсем забыл: формочка рисуется в quirks mode, переверстывать некогда). Пока остановился на противоестественной комбинации outline для людей и filter:glow для старых ослов, но... может есть еще что-нибудь простое и универсальное?

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

rash, боюсь что да. Плюс время жмет... Хочется отбиться простым CSSом для самих инпутов. В принципе, уже нашел удовлетворительное решение, просто хотелось расширить кругозор альтернативами и, возможно, подобрать лучшую.

Потом, конечно, переверстаю как надо с HTML5-доктайпом и прочим гламуром, но сегодня нужно сдать хоть кое-как работающий вариант :)

Link to comment
Share on other sites

  • 0

Собственно, оно и есть

остановился на противоестественной комбинации outline для людей и filter:glow для старых ослов

а конкретно

input.error, textarea.error {
outline: 1px solid #fcc;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ff8888,Strength=1);
}

Выглядит (на белом фоне) достаточно похоже и (имхо) достаточно интуитивно. Учитывая, что проект по сути внутренний, думаю, прокатит. Но, имхо, уметь без последствий управляться с дефолтным видом полей всё равно полезно...

Link to comment
Share on other sites

  • 0

Есть еще такое свойство CSS3 как initial, задает стиль для элемента по умолчанию. В Firefox -moz-initial. Пока конкретно не придумал, как можно применить в данном случае, но что-то подсказывает, что можно задействовать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy