... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Оформление элементов форм при помощи CSS (стр.4)

 

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок

Вернемся к оформлению элементов формы. Для каждого из них можно задать цвет фона, границы, размер, параметры шрифта - т.е. любые параметры, которые можно задать с помощью свойств CSS. На первом этапе нам предстоит выбрать способ выбора селекторов для написания таблицы стилей для формы. Сложность в том, что большинство элементов создается с помощью элемента INPUT и отличаются они лишь значением атрибута type.

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

.text {
background: #FDF5E6;
color: #696969;
border: 1px inset #A0522D;
}

Как видите, правило очень простое. Оно определяет цвет фона текстовых полей и цвет текста, который будет вводить в эти поля пользователь. Кроме того, задается тонкая граница типа inset, т. е. поля будут немного "вдавлены" в форму. Для того чтобы увидеть этот эффект в браузере, необходимо прописать атрибут class="text" во всех элементах, определяющих текстовые поля. Их у нас три:

<INPUT TYPE="text" NAME="login" SIZE="27" class="text">
<INPUT TYPE="password" NAME="pass" SIZE="27" class="text"<
<TEXTAREA COLS="20" ROWS="4" NAME="addr" class="text"></TEXTAREA>

В принципе, аналогичным образом можно поменять внешний вид любых элементов формы, например кнопок. Сейчас они стандартные, серые и скучные. Их цвет и оформление также легко поменять с помощью CSS. Давайте создадим класс button и определим в нем стиль кнопок формы.

.button {
background: #660000;
border: 1px outset #A0522D;
color: #FFF;
font-weight:bold; }

Данный стиль определяет красно-коричневый фон кнопок, белый полужирный теш надписей на них и выпуклую границу. Укажем атрибут class="button" в коде элементов, определяющих кнопки:

<INPUT TYPE="submit" NAME="submit" VALUE="Регистрация" class="button">
<INPUT TYPE="reset" NAME="reset" VALUE="Очистить" class="button">

В результате кнопки формы изменят вид на описанный в стиле - ОТКРЫТЬ ПРИМЕР. Как видите, проявив фантазию и применив уже имеющиеся знания о CSS, можно оживить обычную Web-форму, что, несомненно, добавит привлекательности любой Web-странице.

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены