^ Наверх
Тегам
apple tv, bootstrap, centos, cheat sheets, chyrp, cms, cp1251, css, css-framework, daos, ddos, denwer, disqus, dns, doodles, efix, endels, evernote, firefox, flash, forex, forex mmcis group, google, google drive, hosts, httrack, hypercomments, input, intensedebate, ipad pro, iphone, iphone 6s, iphone 6s+, jquery, json, lenovo, livejournal, lj, mac os, mac pro, mamp, microtext, monstra cms, ping-admin, reg.ru, selectel, simaphone, stick footer, template cms, textpattern, to do, toup, uptime, utf8, vds, xampp, агс, банковская карта яндекс.денег, блог-клиент, блоггинг, верстка, виртуальный сервер, выравнивание в блоке, гидеон сундбек, гоша, дудлы, задачка, идея, инвестиции, интернет-магазин, кино, клиенты, кодировка, комменты, кросспостинг, микро cms, молния, мониторинг, мотив, мошенники, наверх, облако, обои, оптимизация, оффлайн, оффтоп, ошибки, платон, почта для домена, прижать футер, проверка flash, рип сайта, сателлиты, ссср, старт, техника, управление временем, успехи, фотоальбом, фоторепортаж, хостинг, цели, шпаргалки, шпоры, электронные деньги, яндекс, яндексдиск, яндекс мерика, яша
Сортировать по:

CSS оформление полей формы

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

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

Css фреймворков существует довольно много, как говорит википедия всеобъемлющими из них являются: Twitter Flight, Blueprint, 960 Grid System, Yet Another Multicolumn Layout (YAML), Bluetrip, Bootstrap, css-framework и т.д. Но самым популярным из них является Bootstrap от разработчиков Twitter. Хорошая документация, дополнительные компоненты и js скрипты дают возможность оформить сайт в современном стиле. Одним из положительных моментов является возможность создания пользовательской сборки. Для этого необходимо отметить нужные компоненты и скачать библиотеку. Сделать это можно по адресу: twitter.github.io/bootstrap/customize.html.

Еще могу порекомендовать css фреймворк российских разработчиков. он так и называется css-framework. Приятный инструмент, легкий в понимании и в весе (5 KiB сжатая(zip) версия). Правда нет наворотов, как в bootstrap-е, но зачастую они просто не нужны. Используются только основные html тэги, исключается конфликт имен из-за применения префикса к стилям фреймворка.

Мне лично готовые решения по нраву, но не подключать же из-за каких то полей целую библиотеку?

Поэтому есть второй вариант, локальный – настроить отдельные html элементы при помощи кода ниже.

input[type=“text”],[type=“password”]{
border: 1px solid #cccccc; /*цвет рамки*/
border-radius: 3px; /*закругление углов (общее)*/
-webkit-border-radius: 3px; /*закругление углов (Google Chrome)*/
-moz-border-radius: 3px; /*закругление углов (FireFox)*/
-khtml-border-radius: 3px; /*закругление углов (Safari)*/
background: #ffffff !important; /*желательно прописывать, так как в Chrome при сохранных данных оно может быть желтым*/
outline: none; /*удаляет обводку в браузерах хром(желтая) и сафари(синяя)*/
height: 24px; /*высота на свое усмотрение*/
width: 120px; ширина на свое усмотрение*/
color: #000; /*цвет шрифта в обычном состоянии*/
font-size: 14px; /*Размер шрифта*/
font-family: Tahoma; /*Стиль шрифта*/
}

В разных ситуациях можно использовать или первый, или второй вариант.

comments powered by HyperComments

Оставьте комментарий