Заковыристые инпут

30 Sep, 2005

В последней верстке столкнулся с проблемой - такой себе маленкий challenge со стилями для input...

Как нарисовали

В макете было отрисовано примерно так:

Первые мысли

Сначала решил реализовать обернув этот INPUT в SPAN и потом задать белую границу для самого инпута и серую для СПАНа - рассчитывая что спан обернет весь инпут. Очевидная как по мне мысля.

Заработало сразу же в ИЕ (что говорило о том, что путь неправильный :)). А вот в Опере и ФФ спан отобразился сзади от ИНПУТа - примерно так:

Этого терпеть было никак нельзя. Еще пару минут подумав я задал:

  1. input {
  2. display:block'
  3. width:.....
После чего оно кое-как нормализовалось в ФФ но опера понимала это как то еще по своему. Я начал впадать в отчаяние.(быстро я, да? отчаянный парень)

Кроме того, мне было нельзя в том контексте использовать display:block потому как в той же строке был текст - это бы означало либо ломание дизайна либо создание нового элемента (СПАНа какого-нить) - а плодение спанов я очень не люблю. ОЧЕНЬ. :)

Забрезжила надежда

Перебрав экзотические варианты с фоновой картинкой для INPUT(слишком просто) я вдруг вспомнил что у нас есть такой мощный инструмент как BORDER а именно DOUBLE, вот такой CSS:
  1. input {
  2. border:3px double #ссс;
  3. background:#CAE4FF;/*голубой фон*/
  4. }
Вот что я увидел во всех ИЕ (5.0-6.0) и Операх 7-8: Это конечно не совсем то что хотел дизайнер - но очень и очень близко. И даже лучше как мне показалось :). Но вот как это отобразил ФФ: Он посчитал (и наверное правильно) что граница - это тоже часть блока и у нее должен быть такой же фоновый цвет - мне это ясное дело не понравилось...

-moz-* на помощь

Cузив проблемную область (для вин платформы по крайней мере) до одного браузера, да еще и самого любимого :) я понял что можно включить его тяжелую артилерию - а именно специальные CSS свойства этого броузера:
  1. input{
  2. background:#CAE4FF;
  3. border:3px double #ccc;
  4. -moz-border-left-colors:#ccc #fff #ccc;
  5. -moz-border-right-colors:#ccc #fff #ccc;
  6. -moz-border-top-colors:#ccc #fff #ccc;
  7. -moz-border-bottom-colors:#ccc #fff #ccc;
  8. }
(Описание свойств -moz-) Свойство очевидно отвечает за цвета границы. В данном случае - сначала указывает цвет внешней, потом второй по счету извне, и наконец третьей. То есть делает из нашего многострадального инпута, пускай не совсем то что хотел дизайнер, но зато даже еще и красивее:

В конце

Вот такая короткая эпопея. У кого были похожие проблемы с лучшим решением (это я считаю полукостылем - хоть и рабочим) милости просю в комменты. Лучшего решения так и не нашел... :(

18 комментариев к “Заковыристые инпут”

1.Кай | 30 Sep, 2005
Вот с хаком для ИЕ получилось: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <style> SPAN { border: solid 1px #ccc; padding-top: 1px; } SPAN INPUT { border-width: 0px; background:#CAE4FF; width: 100px; margin: 1px; } * HTML SPAN { padding: 1px; } </style> </head> <body> <span><input /></span> </body> </html>
2.akella | 03 Oct, 2005
2Кай: Спасибо, жаль в Опере ломается и в старых ИЕ не так :(. НО все равно башое спсб. Надо че то с бордерами в Опере домутить еще ( -opera-border.... -ie-border-...:))) 2Exie: Понимаешь, мне стыдно было вставить один СПАН, что бы спасти ситуацию - а ты предлагаешь их тут наплодить как минимум 3(TABLE TR TD...) и без особого на то смысла. Если на то пошло - достаточно было бы одного СПАНа... Нужно принимать challenge, а не дрейфить к таблицам ;) А так как я в итоге сделал - во всех броузерах и тока несколько строк ЦСС без ХТМЛ вообще. ПС: А мне с двойной больше нравицца ;). В любом случае, то что я тут проделал, все же легкий извратик...
3.ganges | 01 Oct, 2005
Span? No! Однако это первый вменяемый (прочитанный мною имеется ввиду) пост о вменямом же применении -moz на практике.Респект и сэнкс. Что же касается форм стайлинга... Это просто кошмар.
4.edgy | 03 Oct, 2005
background? для label и input например?
5.akella | 03 Oct, 2005
Ну правильнее все же разделять лейбел и инпут - то есть я в том лагере который их разделяет (а не вкладывает инпут внутрь лэйбелов). А во вторых - эффект показался слишком простым - ну не хотелось мешать картинки для такого простого эффекта. Ты должен понять психологию человека который часто сам себе усложяет задачу. Я стараюсь всегда приоритетно не вносить изменений в ХТМЛ до последнего - и считаю такой путь правильным.
6.ganges | 03 Oct, 2005
Браво, Акилла! Я стопроцентов согласен с комментарием номер 6!
7.Exie | 02 Oct, 2005
Я бы обернул инпут в таблицу %)) Да, я знаю, это отвратительно %)) Но таблицы - это пока единственный способ получить границы и паддинги именно в том виде, в котором планировалось. Про спан я даже не вспоминаю. Если их вкладывать не очень много друг в друга - получается достаточно терпимо %)) Иначе ИЕ начинает сыпать своими изысканными багами. ПС. А вариант без двойной границы, по-моему, симпатичнее ;))
8.Бондарев Александр | 04 Oct, 2005
Есть такой старый забытый браузер NN4. Вот там все это дело будет смотреться забавно :)))) Он бордер поля инпута рисует квадратиком рядом с инпутом... Так что добавь для него (хоть он и редкий совсем) borderwidth: 0px; (он без дефисов понимает).
9.Exie | 04 Oct, 2005
2akella: Если нужно сделать верстку, соответствующую дизайну на 100%, хороши любые средства %)) А это-то обычно и требуется. У меня тоже всегда предпочтений к хтмл/цсс методам куда больше, чем к картинкам (хотя бы потому что первые гораздо менее чувствительны к сжатиям-растяжениям %)) И поэтому стараюсь в разметке не использовать картинки для таких "чисто хтмльных вещей", как бордеры. А код я не боюсь засорить. Таблицы - это некрасиво, конечно, но если гнаться за красотой и логической целостностью кода страниц - все срочно юзаем xml-xslt %))
10.polch | 04 Oct, 2005
макет с художественной точки зрения неверный :), а подход к решению горбатой окантовки - правильный. Итого: выбирайте правильного дизайнера без бордюрчиков и рюшиков в голове.
11.akella | 04 Oct, 2005
2Александр: НН4 может года 4 назад еще и был актуален - сейчас уже думаю нет. И уж точно не в наших землях. Так что извините но НН4 это дела давно минувших дней. МХО. По ихней статистике - год назад было 0.2%... 2Exie: Я в себе воспитал эту боязнь добавлять спаны и обертывающие ДИВы. Лишнее и не несущее смысла :(. Лучше помучиться и избежать. Впадать в крайности тоже не выход... ХТМЛ для того и был сделан. ХМЛ это уже слишком - не для того он предназначен ИМХО...
12.mickron | 04 Oct, 2005
ну, с -moz'ами можно было хоть в файрфоксе сделать соответствующие прорисовке рамки
13.akella | 04 Oct, 2005
Я просто решил уже следовать единому стилю во всех броузерах - и изначально макет был отрисован для виндовз приложения - поэтому я рискнул немного изменить внешний вид...
14.Kildor | 08 Oct, 2005
(-moz-)outline? Правда он в ИЕ не смотрится, зато в опере — именно то что надо input { background:#CAE4FF; border:1px solid #fff; outline: 1px solid #ccc; } Правда нет под рукой ФФ, посмотреть как там будет выглядеть, плюс могут быть необходимы шаманства для позиционирования всего этого дела — зависит от шаблона… PS: Каюсь, я не считаю необходимым 100% совпадение во всех браузерах, и считаю что на ИЕ можно забить в красивостях — лучше я подработаю напильником под особенности Оперы и Гекконов (тот-же outline, content, …position: fixed, -moz-border-radius), чем пытаться делать 100% совпадение в ие…
15.akella | 24 Jul, 2006
Ха! Ты абсолютно права. Спасибо ) А я вот не догадался как то ) Очередное доказательство что мужчинам не хватает женщин. :) Давайте уже эмансипируйтесь в веб разработке... )
16.Lolita | 24 Jul, 2006
Я конечно не спец, но если в твоем примере заменить цвет третьей границы на цвет бэкграунда, тобто на голубой, то получишь тот вид, который запланировал дизайнер А именно: input{ background:#CAE4FF; border:3px double #ccc; -moz-border-left-colors:#ccc #fff #CAE4FF; -moz-border-right-colors:#ccc #fff #CAE4FF; -moz-border-top-colors:#ccc #fff #CAE4FF; -moz-border-bottom-colors:#ccc #fff #CAE4FF; }
17.Del'ka | 23 Nov, 2007
прикольно, но разве лишний span - не нарушение семантики? почему бы не сделать фон картинкой, а у кого они отключены - те просто увидят упрощённое оформление (а раз отключили картинки значит им "красивости" не нужны)
18.akella | 24 Nov, 2007
лишний спан не нарушает никакую семантику. Этот элемент сам по себе не несет никакого смысла, только как группирующий. Если делать фон картинкой - то нужно фиксировать ширину, а инпуты были разные. И при отключенных картинках непонятно что бы они увидели вместо инпутов(пришлось бы фиксисровать высоту, а это повлекло бы еще другие проблемы)