Если вам надоела старая форма ввода с квадратными углами или она не вписывается в ваш дизайн, я предлагаю вам сделать новую форму ввода в стиле web 2.0. Для этого мы опишем параметры форм input и textarea в css.
Для начала сгладим углы
Code
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
3px – это радиус скругления рамки
Добавим тень внутри формы
Code
-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;
0 – отступ вправо
3px – отступ вниз
5px – размытие тени
#ECECEC – цвет тени
Inset – тень внутри формы, без этого параметра тень будет снаружи
Добавим цвет рамки
Code
border-color:#C0C0C0 #C2C2C2 #D5D5D5;
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;
Пример формы вы можете посмотреть на этом же сайте после комментариев.
