Css динамическая изменение размеров форма. Динамическое изменение размера шрифта на jQuery. Масштабирование до максимального размера

22.10.2020

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

Решение
Стиль элемента формы, как и любого другого HTML-элемента, можно задать с помощью CSS.

Рис. 6.1 . Вид формы по умолчанию в броузере Firefoxi

Изображенная на рис. 6.1 форма оформлена в соответствии с настройками по умолчанию, используемыми броузером Firefox под Windows XP. Ее вид будет изменяться при просмотре в различных броузерах под разными платформами. Ниже представлена типичная форма:

"http://www.w3.org/1999/xhtml" lang = "en-US" > <span>Изменение вида элементов формы с помощью CSS </span>

Внешний вид этой формы можно изменить, написав правила стилей для элементов:

form { border: 1px dotted #AAAAAA ; padding: 0 .5em ; } form div { margin-bottom: 1em ; } input { color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; } select { width: 100px ; color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; } textarea { width: 200px ; height: 40px ; color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; }

Теперь форма выглядит, как на рис. 6.2.

Обсуждение
Как вы наверняка догадались, заданные правила стилей для HTML-элементов form, input, textarea и select будут применены по отношению к каждому их экземпляру, находящемуся на странице, с которой связан файл таблицы стилей. Для изменения оформления полей формы мож- но использовать множество различных свойств. С помощью CSS можно управлять практически всеми аспектами поля :

input { color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; font: 0 .9em Arial, Helvetica, sans-serif ; padding: 0 .2em ; width: 200px ; }

Совет
Формы и фоновый цвет . Часть посетителей вашего сайта могут плохо различать цвета, а часть, возможно, пользуется голосовым броузером. Поэтому цвета никогда не должны выполнять важных функций - к примеру, указания вроде «Желтые поля обязательны для заполнения» должны быть под полным запретом.

Рассмотрим значения свойств более подробно:

Внешний вид HTML формы можно значительно улучшить с помощью CSS:

Стили полей ввода

Использовать свойство width для определения ширины поля ввода:

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

input - будут выбраны только текстовые поля
input - будет выбирано только поля пароля
input - будут выбраны только числовые поля
и т.д...

Дополнительные вводы

Использовать свойство padding для добавления пространства внутри текстового поля.

Совет: Если у вас есть много вводов друг за другом, Вы можете также добавить margin , чтобы было больше места за пределами:

Обратите внимание, что мы установили свойство box-sizing к border-box . Это гарантирует, что заполнение в конечном итоге границы включены в общюю ширину и высоту элементов.
Подробнее о свойстве box-sizing в главе CSS Стили Бокс .

Границы ввода

Использовать свойство border для изменения размера и цвета границы, и свойство border-radius для добавления закругленных углов:

Если вам нужна только нижняя граница, используйте свойство border-bottom:

Цвет ввода

Использовать свойство background-color цвета фона ввода, свойство color для добавления изменение цвета текста:

Фокус ввода

По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает фокус (щелчок мышью). Это поведение можно удалить, добавив outline: none; в input .

Использовать селектор:focus , чтобы поле ввода, получил фокус:

Ввод иконка и изображение

Если вы хотите установить иконку внутри ввода, используйте свойство background-image и расположите его в свойстве background-position . Также обратите внимание, что мы добавили большую левую прокладку для резервирования места иконки:

Пример

input {
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

Редактор кода »

Трансформация поиска ввода

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

» стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта.

Задача — реализовать динамическое изменение размера шрифта сайта в зависимости от разрешения экрана, т.е. размера окна браузера.

Прежде чем приступить к описанию решения, хочу обозначить два момента :

Лично для меня полезность данной штуки весьма сомнительна , и я скорее бы рассматривал такую возможность просто в качестве ознакомления. А вот Сергей, например, эту технику давно хотел применить на практике и видит в ней смысл. Поэтому, возможно, кому-нибудь еще эта информация также пригодится.
Решение довольно простое, работает на моем любимом jQuery, но использование этого фреймворка только ради осуществления данной задачи — не очень разумно , поскольку один лишь фреймворк «весит» под 60 Кб, а сам скрипт при этом состоит из всего лишь 10 строк. Я полагаю, что на нативном JavaScript скрипт, реализующий то же самое, будет значительно меньшего размера.

Итак, приступим.

Сначала я подробно опишу работу jQuery-скрипта, а затем объясню, как его применить к той или иной части веб-сайта.

jQuery

За точку отсчета я взял ширину в 1000 пикселей. Как правило, это минимальная ширина, под которую верстаются сайты. Заносим этот показатель в переменную:

Var width = 1000;

Теперь устанавливаем минимальный размер шрифта в пикселях, ниже которого он не будет уменьшаться:

Var bodyWidth = $("html").width();

Определяем коэффициент, на который будет умножаться базовый (минимальный) размер шрифта в зависимости от размера окна браузера. Цифру получаем путем деления ширины хтмл-документа на базовую (минимальную) ширину. Т.е., к примеру, если ширина окна браузера составляет 1600 пикселей, то получим коэффициент 1,6.

Var multiplier = bodyWidth / width;

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

If ($("html").width() >= width) fontSize = Math.floor(fontSize * multiplier);

Теперь полученный скорректированный размер шрифта применяем к тегу :

$("body").css({fontSize: fontSize+"px"});

Все вышеописанные строки помещаем в функцию function fontSize() {} , затем запускаем эту функцию после загрузки хтмл-документа, а также после изменения размера окна браузера:

$(function() { fontSize(); }); $(window).resize(function() { fontSize(); });

Вот целиком код jQuery-скрипта, который получился у нас в итоге:

Function fontSize() { var width = 1000; // ширина, от которой идет отсчет var fontSize = 12; // минимальный размер шрифта var bodyWidth = $("html").width(); var multiplier = bodyWidth / width; if ($("html").width() >= width) fontSize = Math.floor(fontSize * multiplier); $("body").css({fontSize: fontSize+"px"}); } $(function() { fontSize(); }); $(window).resize(function() { fontSize(); });

HTML

Рассмотрим применение вышеуказанного скрипта на примере 3-колоночного макета страницы, имеющего следующую структуру HTML-кода:

CSS

Теперь осталось только использовать динамический размер шрифта для тех блоков, к которым мы хотим его применить. Давайте, для примера, сделаем так, чтобы он менялся у всей страницы, за исключение правой колонки, а у левой колонки сделаем его чуть меньше основного.

Все очень просто.

Во-первых , правой колонке мы просто-напросто устанавливаем свой фиксированный размер шрифта и высоту строки, и скрипт его не затронет:

#right { font-size: 12px; line-height: 18px; }

Во-вторых , левой колонке ставим чуть меньший размер шрифта:

#left { font-size: 0.9em; }

В-третьих , нужно либо у тега , либо у соответствующего блока указать высоту строки в em, чтобы она тоже изменялась динамически.

Если вы хотите менять размер шрифта только у конкретного блока, допустим, у #content , тогда будет логичнее в скрипте поменять body (в строке $("body").css({fontSize: fontSize+"px"});) на нужный идентификатор или класс.

Внешний вид HTML-формы может быть значительно улучшена с помощью CSS:

Стилизация поля ввода

Используйте width свойство, чтобы определить ширину поля ввода:

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

input - будет выбирать только текстовые поля
input - будет только выбрать поля паролей
input - будет только выбрать номер поля
и т.д..

проложенные Входы

Используйте padding свойство, чтобы добавить пространство внутри текстового поля.

Совет: Если у вас есть много входов после того, как друг с другом, вы также можете добавить margin , чтобы добавить больше пространства за их пределами:

Граничит Входы

Используйте border собственности, чтобы изменить размер и цвет границы, а также использовать border-radius свойство, чтобы добавить закругленные углы:

Если вы хотите только нижнюю границу, используйте border-bottom свойство:

Цветные входы

Используйте background-color свойство, чтобы добавить цвет фона на вход, и color свойство изменять цвет текста:

Входы Фокусированные

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

Используйте:focus селектор, чтобы сделать что - то с полем ввода, когда он получает фокус:

Ввод с помощью значка / изображения

Если вы хотите иконку внутри входа используйте background-image свойства и поместить его с background-position собственности. Также обратите внимание, что мы добавим большой левый отступ резервировать пространство иконы:

пример