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

30 September, 2005

XHTML/CSS, Дизайн

В последней верстке столкнулся с проблемой – такой себе маленкий 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-)
Свойство очевидно отвечает за цвета границы. В данном случае – сначала указывает цвет внешней, потом второй по счету извне, и наконец третьей. То есть делает из нашего многострадального инпута, пускай не совсем то что хотел дизайнер, но зато даже еще и красивее:

В конце

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

XHTML/CSS, Дизайн

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

Кай | 1. 30 September, 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>

ganges | 2. 1 October, 2005

Span? No!
Однако это первый вменяемый (прочитанный мною имеется ввиду) пост о вменямом же применении -moz на практике.Респект и сэнкс.
Что же касается форм стайлинга… Это просто кошмар.

Exie | 3. 2 October, 2005

Я бы обернул инпут в таблицу %))
Да, я знаю, это отвратительно %))
Но таблицы – это пока единственный способ получить границы и паддинги именно в том виде, в котором планировалось. Про спан я даже не вспоминаю.
Если их вкладывать не очень много друг в друга – получается достаточно терпимо %)) Иначе ИЕ начинает сыпать своими изысканными багами.
ПС. А вариант без двойной границы, по-моему, симпатичнее ;))

akella | 4. 3 October, 2005

2Кай: Спасибо, жаль в Опере ломается и в старых ИЕ не так :(.
НО все равно башое спсб. Надо че то с бордерами в Опере домутить еще ( -opera-border…. -ie-border-…:)))

2Exie: Понимаешь, мне стыдно было вставить один СПАН, что бы спасти ситуацию – а ты предлагаешь их тут наплодить как минимум 3(TABLE TR TD…) и без особого на то смысла. Если на то пошло – достаточно было бы одного СПАНа… Нужно принимать challenge, а не дрейфить к таблицам ;)
А так как я в итоге сделал – во всех броузерах и тока несколько строк ЦСС без ХТМЛ вообще.

ПС: А мне с двойной больше нравицца ;).

В любом случае, то что я тут проделал, все же легкий извратик…

edgy | 5. 3 October, 2005

background? для label и input например?

akella | 6. 3 October, 2005

Ну правильнее все же разделять лейбел и инпут – то есть я в том лагере который их разделяет (а не вкладывает инпут внутрь лэйбелов). А во вторых – эффект показался слишком простым – ну не хотелось мешать картинки для такого простого эффекта.

Ты должен понять психологию человека который часто сам себе усложяет задачу. Я стараюсь всегда приоритетно не вносить изменений в ХТМЛ до последнего – и считаю такой путь правильным.

ganges | 7. 3 October, 2005

Браво, Акилла!

Я стопроцентов согласен с комментарием номер 6!

Бондарев Александр | 8. 4 October, 2005

Есть такой старый забытый браузер NN4. Вот там все это дело будет смотреться забавно :)))) Он бордер поля инпута рисует квадратиком рядом с инпутом…

Так что добавь для него (хоть он и редкий совсем) borderwidth: 0px; (он без дефисов понимает).

Exie | 9. 4 October, 2005

2akella: Если нужно сделать верстку, соответствующую дизайну на 100%, хороши любые средства %)) А это-то обычно и требуется.
У меня тоже всегда предпочтений к хтмл/цсс методам куда больше, чем к картинкам (хотя бы потому что первые гораздо менее чувствительны к сжатиям-растяжениям %)) И поэтому стараюсь в разметке не использовать картинки для таких “чисто хтмльных вещей”, как бордеры.
А код я не боюсь засорить. Таблицы – это некрасиво, конечно, но если гнаться за красотой и логической целостностью кода страниц – все срочно юзаем xml-xslt %))

polch | 10. 4 October, 2005

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

akella | 11. 4 October, 2005

2Александр: НН4 может года 4 назад еще и был актуален – сейчас уже думаю нет. И уж точно не в наших землях. Так что извините но НН4 это дела давно минувших дней. МХО.
По ихней статистике – год назад было 0.2%…
2Exie: Я в себе воспитал эту боязнь добавлять спаны и обертывающие ДИВы. Лишнее и не несущее смысла :(. Лучше помучиться и избежать.
Впадать в крайности тоже не выход… ХТМЛ для того и был сделан. ХМЛ это уже слишком – не для того он предназначен ИМХО…

mickron | 12. 4 October, 2005

ну, с -moz’ами можно было хоть в файрфоксе сделать соответствующие прорисовке рамки

akella | 13. 4 October, 2005

Я просто решил уже следовать единому стилю во всех броузерах – и изначально макет был отрисован для виндовз приложения – поэтому я рискнул немного изменить внешний вид…

Kildor | 14. 8 October, 2005

(-moz-)outline?
Правда он в ИЕ не смотрится, зато в опере — именно то что надо
input {
background:#CAE4FF;
border:1px solid #fff;
outline: 1px solid #ccc;
}
Правда нет под рукой ФФ, посмотреть как там будет выглядеть, плюс могут быть необходимы шаманства для позиционирования всего этого дела — зависит от шаблона…

PS: Каюсь, я не считаю необходимым 100% совпадение во всех браузерах, и считаю что на ИЕ можно забить в красивостях — лучше я подработаю напильником под особенности Оперы и Гекконов (тот-же outline, content, …position: fixed, -moz-border-radius), чем пытаться делать 100% совпадение в ие…

Lolita | 15. 24 July, 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;
}

akella | 16. 24 July, 2006

Ха! Ты абсолютно права. Спасибо ) А я вот не догадался как то )
Очередное доказательство что мужчинам не хватает женщин. :) Давайте уже эмансипируйтесь в веб разработке… )

Del'ka | 17. 23 November, 2007

прикольно, но разве лишний span – не нарушение семантики?

почему бы не сделать фон картинкой, а у кого они отключены – те просто увидят упрощённое оформление (а раз отключили картинки значит им “красивости” не нужны)

akella | 18. 24 November, 2007

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

Оставить комментарий