Создаем красивую форму ввода

Весь исходный код, который надо добавить в CSS

Code

input[type=text],input[type=password],textarea {
border-color:#C0C0C0 #C2C2C2 #D5D5D5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

input[type=password]: hover, input[type=text]: hover, textarea: hover {
border-color:#b0b0b0 #b2b2b2 #c5c5c5;
-webkit-box-shadow:0 0 1px #CCC, 0 3px 5px #ECECEC inset;
-moz-box-shadow:0 3px 5px #ECECEC inset;
box-shadow:0 3px 5px #ECECEC inset;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

input[type=password]: focus, input[type=text]: focus, textarea: focus {
border-color:#007B97 #0099BB #00B0D8;
-webkit-box-shadow:0 0 1px #CCC, 0 3px 5px #ECECEC inset;
-moz-box-shadow:0 3px 5px #ECECEC inset;
box-shadow:0 3px 5px #ECECEC inset;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

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

Также изменив несколько параметров можно получить красивую подсветку вокруг формы

Code

box-shadow:0 0px 5px #00B0D8;

Пример формы вы можете посмотреть на этом же сайте после комментариев.

дизайн, css

Подписка по RSS

Рейтинг

Ещё почитать

Вся правда о кризисе

Хатико: Самый верный друг

Сравнение Windows 7 и Ubuntu 10.04

Комментарии вконтакте

комментарии (5)

DPolyakov 19.02.2011 в 15:54 / # / Ответ / Цитата

пользователи ie в пролете

ценZz 24.02.2011 в 23:31 / # / Ответ / Цитата

DPolyakov, согласен.

Strange Worm 01.04.2011 в 07:50 / # / Ответ / Цитата

А PIE.htc в случае с IE не помогает разве?
Вобщем спасибо за статью большое! Сейчас начну экскрементировать biggrin

sharpmaster 11.04.2011 в 06:49 / # / Ответ / Цитата

В хроме рамка автоматом рисуется у элементов на которых фокус. В итоге оно смешивается и не совсем красиво выглядит.

page rank backlink 04.02.2012 в 13:22 / # / Ответ / Цитата

hey there blogprovsio.ru owner discovered your site via yahoo but it was hard to find and I see you could have more visitors because there are not so many comments yet. I have found website which offer to dramatically increase traffic to your site http://xrumerservice.org they claim they managed to get close to 1000 visitors/day using their services you could also get lot more targeted traffic from search engines as you have now. I used their services and got significantly more visitors to my website. Hope this helps smile

They offer most cost effective <a href=http://xrumerservice.org>backlink service</a> Take care. Jason

Добавить комментарий