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

1 цвет – верхняя рамка
2 цвет – левая и правая рамки
3 цвет - нижняя рамка

Code

border-color:#b0b0b0 #b2b2b2 #c5c5c5;

Code

border-color:#007B97 #0099BB #00B0D8;

Весь исходный код, который надо добавить в 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;

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

Подписка по RSS

Рейтинг

дизайн, css

Дата: 13.02.2011 | Просмотров: 2444

Ещё почитать

Windows 7 - лучшая операционная система на сегодняшний день ← 05.03.2010 г. (комментариев:18)

Я вернулся! ← 08.09.2009 г. (комментариев:0)

Способы заработка в сети интернет ← 14.05.2009 г. (комментариев:2)

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

комментарии (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 / # / Ответ / Цитата

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

backlinks 20.04.2012 в 15:24 / # / Ответ / Цитата

Are you looking for an affordable way to drive tons of traffic to your web page? You can stop looking because XRumerService is all you need!

Hey
As a web site owner, you know driving traffic is everything: It means more visitors, more click-through, and most importantly MORE MONEY!

Now there’s a new service that gives you thousands of visitors per day for just pennies.

And the way it works is this:

Links to your web page are posted automatically in thousands of forums, creating backlinks to your site.

Having so many backlinks, your website gain massive popularity in eyes of search engines so Google, Yahoo and Bing have no choice but to put your site at the top pages for your targeted keywords so your site will get FREE, TARGTED, LONG TERM TRAFFIC EFFORTESLY AND People see your website, products, services etc and spend their money. It’s that easy!

XRumerService eliminates the need for spending hours, days or even weeks manually creating backlinks because it does it all for you automatically! And best of all is that it’s totally AFFORDABLE!!!

You can check it out here:

http://xrumerservice.org

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