Красивые css input (поля ввода)

http://cssmake.ru/component/content/article/7/108

( 0 - user rating )

Данная статья посвященна тому, как с помощью одного лишь css и без использования скриптов научится создавать красивые поля ввода, поля выбора (input,select). Для этого нам понадобится не только знания css, но и изображения, которые будут служить фоном полей. К сожалению, на чистом css пока еще невозможно делать такие вещи как закругление углов, поэтому нам остается два выбора: либо прибегать к использованию скриптов, либо пытатся сделать это при помощи css и фоновых изображений. У каждого способа конечно же есть свои недостатки и преймущества. Так как данная статья не о скриптах, мы на них и не будем останавливатся, детально рассмотрим метод с использованием css, для которого мы можем определить пусть не все, но многие преймущества и недостатки.

Недостатки:

- Наверно самым большим недостатком использования фона в качестве оформления поля ввода является его непрактичность. В нынешнее время большинство сайтов в сети интернет используют cms, в которых все поля ввода генерируются без участия человека, веб-мастеру доступен лишь css для установки стилей элементов. Поэтому очень часто бывает просто невозможно использовать дополнительные контейнеры (div), чтоб создать так называемую css обвязку для css input. Выходов из этой ситуации несколько: можно отказатся от красивых css input и select и для оформления использовать стандартные css свойства, можно указать одинаковую фиксированную ширину и высоту для всех css input и select, тогда можно использовать одно изображение для оформления, а можно использовать css input в связке с кнопкой ввода, что немного развяжет нам руки и позволит сделать красивые, относительно эластичные, поля ввода. Почему я их назвал "относительно эластичные", Вы поймете дальше, при рассмотрении примеров.

Преймущества:

Преймущество у этого способа одно, но самое главное - это позволит нам избежать использования скриптов для оформления.

Создавать красивый css input мы будем с помощью следующего изображения:

А для создания формы поиска мы используем это изображение:

Красивый css input без скриптов

Первым шагом на пути к красивому и оригинальному input у нас будет установка базовых значений css стилей...

input{

width:206px;
height:24px;
border:none;
background:url('/images/sample_input.gif') 0 0 no-repeat;

}

<input type="text" />

Как видите, мы указали основные css стили для нашего input. Обязательно нужно установить ширину и высоту равными размерам фонового изображения. А также мы обнулили значение свойства border, так как по умолчанию у всех полей ввода установлена граница border. Ну и конечно же указали путь к изображению, которое будет использоватся в качестве фона для css input. Посмотрим, что из этого получилось:

Выглядит неплохо, правда? А попробуйте набрать текст в поле. Как видите выглядит не очень. Поэтому второе, что мы сделаем - это установим свойства для шрифта и внутренние отступы для текста от границ input.

input{

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:normal;
color:#A7ADB6;
padding:4px 10px 4px 10px;
border:none;
width:186px;
height:24px;
background:url('/images/sample_input.gif') 0 0 no-repeat;

}

<input type="text" />

Вот теперь, если ввести текст, то все выглядит хорошо. Как Вы могли заметить, по сравнению с первым вариантом css для input, изменились значения ширины и высоты. Так как мы применили внутренние отступы (padding) для поля ввода, к ширине и высоте input автоматически прибавились значения указанные в свойстве padding, поэтому мы уменьшили размеры, чтоб сумма их стала такой же как и раньше.

Хочу повторить, что этот способ подходит, если все поля ввода, для которых он применяется, будут одинаковых размеров.
Если же на сайте ширина input будет изменятся динамически, то этот способ не подходит.

Эластичный красивый css input

Если на сайте есть возможность "обвязать" input контейнерами div, то с его красивым оформлением проблем вообще не возникает. Единственная большая проблема - это вес страницы, так как для каждого поля ввода прийдется использовать до 8 контейнеров div. Почему до 8? - потому, что для самой сложной css обвязки необходимо максимум 8 слоев.

На нашем сайте существует статьи, в которых подробно описываются способы создания css обвязки, поэтому в данной статье мы на этом останавливатся подробно не будем, Вы можете самостоятельно ознакомится с этими статьями: Создание простой css обвязки блока., Создание css обвязки блока на градиентном фоне.. Я лишь покажу, как применить это в случае с полями ввода.

Изображения для эластичного css input

Для того, чтоб сделать эластичное поле ввода, необходимо разрезать представленное выше изображения для фона на 3 части:

1. sample_input_02.gif - изображение для заполнения input по всех ширине -
2. sample_input_01.gif - левый уголок для поля ввода -
3. sample_input_03.gif - правый уголок для поля ввода -

Стили для обвязки css input

.fill-input{

background:url('/images/sample_input_02.gif') 0 0 repeat-x;
width:100%;
border:none;
height:24px;
padding:4px 0;

}
.left-input{

background:url('/images/sample_input_01.gif') left top no-repeat;
width:50%;

}
.right-input{

background:background:url('/images/sample_input_03.gif') right top no-repeat;
padding:0 14px 0 16px;

}
.right-input input{

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:normal;
color:#A7ADB6;
padding:0 0 0 10px;
border:none;
width:95%;
height:16px;
background:none;

}

<div class= "left-input">

<div class= "right-input">

<div class= "fill-input">

<input type="text" />

</div>

</div>

</div>

Примечание:

В приципе все должно быть понятно, но хотелось бы остановится на некоторых моментах:

.fill-input {width:50%} - это свойство указывает, какой будет ширина нашего input. Естественно можно использовать как точные значения, так и значения в других доступных измерениях.

.right-input input {width:95%} - так как для отступа слева от обвязки используется padding слева, то ширину равную 100% использовать нельзя, поэтому для отступа справа мы установили ширину равную 95%.

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

Эластичная форма поиска

Последний способ, из представленных мной, заключается в использовании двух элементов формы: поля ввода и графической кнопки. В качестве примера будет использоватся следующее изображение, которое будет применяться для оформления будущей формы:

Разрезаем изображение на составные части

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

Хочу заметить, что удленения изображения не приведет к сильному росту размера, так как используется формат .gif, у которого есть свойство сжимать размер, если в изображении есть повторяющиеся части.

css стили для формы

.input-text{

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:normal;
color:#A7ADB6;
padding:4px 0 0 10px;
border:none;
width:210px;
height:20px;
vertical-align:top;
background:url('/images/sample_form_01.gif') 0 0 no-repeat;

}
.input-button{

background:url('/images/sample_form_02.gif') 0 0 no-repeat;
width:130px;
height:24px;
border:0;
vertical-align:middle;

}

<input class="input-text" type="text" /><input class="input-button" type="button" />

Следует отметить, что для css input нужно использовать vertical-align:top, а для кнопки vertical-align:middle - это позволит выровнять по вертикали эти два элемента.

В итоге мы имеем форму, в которой можно изменять ширину поля ввода.

Выводы:

В данной статье мы рассмотрели 3 способа оформления для css input. У каждого из способов есть свои плюсы и минусы, но для создания красивых форм без использования криптов эти способы наиболее оптимальные.