Html формы ввода рамка

Для того, чтобы изменить цет в input вам понадобится:

В него помещаем(как вы знаете есть «3 способа css») -используем размещение стиля attribute style в теге, вид линии «solid», цвет возьмем переопределенный red(красный) :

Соберем весь код цветной обводки в input

Смотрим пример код цветной обводки в input

Обращаю ваше внимание на то , что кроме обводки осталась обводка по умолчанию черного цвета. в следующем пункте уберем и её!

Меняем цвет обводки в input по умолчанию.

Итак. выше мы пытались покрасить обводку у input, но у нас осталась обводка черного цвета по умолчанию! Давайте исправим эту ситуацию.

Для изменения цвета обводки в input по умолчанию вам понадобится:

Теория и практика из предыдущего пункта.

Единственно, что изменим, это свойство. заменим

Соберем весь код:

Пример цветной обводки в input по умолчанию.

Как видим, у нас появилась цветная обводка у нашего input. НО. при нажатии наша обводка меняет цвет на по умолчанию, черный.

Окончательная смена цвет у input.

Итак. в предыдущих пунктах я рассмотрел два варианта, как менять цвет в input, но эти оба варианта имеют вда различия, что в разном состоянии один из вариантов имеет черную обводку по умолчанию!

Объединим два предыдущих пункта и получим цветную обводку input — постоянно!

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

Источник

Стилизация форм

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

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

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

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

input[type=text] — выберет только текстовые поля ввода
input[type=password] — выберет только поля ввода паролей
input[type=number] — выберет только цифровые поля ввода
и так далее..

Промежутки у полей ввода

Чтобы добавить дополнительные промежутки внутри поля ввода, используйте свойство padding .

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

Обратите внимание, что мы установили для свойства box-sizing значение border-box . Это сделано для того, чтобы промежутки и рамки включались в ширину и высоту элементов.

Поля ввода с рамкой

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

Если вы хотите, чтобы рамка была только снизу поля ввода, то используйте свойство border-bottom :

Цветные поля ввода

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

Поля ввода в фокусе

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

Чтобы определить какой-нибудь свой стиль для поля ввода, находящегося в фокусе, используйте псевдокласс :focus :

Поле ввода с иконкой/изображением

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

Анимированное поле ввода

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

 input[type=text] < transition: width 0.4s ease-in-out; >input[type=text]:focus

Стилизация области ввода

Чтобы запретить изменять размер области текстового ввода (отключить «захват» в левом нижнем углу), используйте свойство resize :

Стилизация меню выбора

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

 input[type=button], input[type=submit], input[type=reset]

Чтобы ширина кнопки была во весь экран, используйте width: 100%; .

Источник

Рамки html свойство border

Рамка — самый популярный и легко создаваемый элемент оформления контента с большим потенциалом преображения дизайна. В этом уроке будем использовать только HTML.

Рамку можно создать для любого html элемента, будь то

, , , , , и так далее.

Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.

Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.

Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку

Так как руководство это практическое, то перейдём непосредственно к примерам.

Для примера возьмём тег

и создадим ему простую рамку толщиной 3 px

Как видите — рамка заняла всё пространство, которое занимает тег.

Так ведёт себя рамка созданная для блочных элементов, таких как

, и т.д.

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

Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.

Рамка для встроенных или строчных элементов, таких как , ,

и т.п., располагается непосредственно вокруг элемента.

Бла-бла-бла Бла-бла-бла border:3px #00B344 solid; width:100px; «>текст текст текст текст Бла-бла-бла Бла-бла-бла

Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла

Можно изменить вид рамки, для этого в значении меняется её название.

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

Для создания неполной рамки в код вместо свойства border вводятся свойства border-top , border-right , border-bottom , border-left , по отдельности или в различных комбинациях, в зависимости от того, какая граница вам нужна.

border-left:3px #00B344 double; border-bottom:3px #00B344 double; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px; » > текст текст текст текст

Выравнивание и отступы рамки

Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align , которое принимает значения

left — выравнивание по левому краю (по умолчанию)

center — выравнивание по центру

right — выравнивание по правому краю

Можно задать для рамки отступы от текста.

Читайте также: Css if have children

Для этого в код рамки вводится свойство padding , которое принимает 4 цифровых значения:

первая цифра — отступ сверху;

вторая цифра — отступ справа;

третья цифра — отступ снизу;

четвёртая цифра — отступ слева.

Отступы задаются в любых доступных в веб единицах размеров.

Если в свойстве padding указать одно значение, то отступы со всех сторон будут одинаковыми.

Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.

Можно задать отступ от предметов находящихся снаружи рамки.

Для этого в код рамки добавляется свойство margin , которое так же как и padding может принимать 4 цифровых значения.

Сделаем отступы слева, сверху и снизу

border:3px #00B344 ridge; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px; » > текст текст текст текст

Можно внутри рамки сделать фоновый цвет.

Для этого в код рамки вводится свойство background , в значении которого указывается код цвета.

background: #F4FC03; border:3px #00B344 ridge; width: 200px; padding: 10px 0 10px 15px; margin:20px; » > текст текст текст текст

Можно вместе с текстом в рамку вставить картинку. В примере .gif картинка.

background-color: #F4FC03; border:3px #00B344 ridge;
width: 240px; height:100px; padding: 5px 0 5px 15px; margin:20px 0 0 20px ;»>
< img src color: #008080;">images/i6.jpg «> Текст текст текст текст текст

А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.

Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.

border:2px solid #555; border-radius:5px; width: 200px; text-align:center; margin:20px; padding:20px; » > текст текст текст текст

border:2px solid #555; box-shadow:3px 3px 5px #999; width: 200px; text-align:center; margin:20px; padding:20px; » > текст текст текст текст

Как оформляются рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.

Перемена
\
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…

Источник