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

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