Навучыцеся палепшыць знешні выгляд вашага вэб-сайта
Вывучэнне таго, як стыль формы з дапамогай CSS з'яўляецца выдатным спосабам , каб палепшыць знешні выгляд вашага сайта. HTML формы, магчыма, з'яўляюцца аднымі з самых агідных рэчаў, на большасці вэб-старонак. Яны часта сумныя і ўтылітарныя і не прапаноўваюць шмат на шляху стылю.
З дапамогай CSS, што можа змяніцца. Аб'яднанне CSS з больш прасунутай формай тэгаў можа даставіць некаторыя цікавыя выглядаюць формы.
змяненне колеру
Гэтак жа, як з тэкстам, вы можаце змяніць колеру пярэдняга плана і фону элементаў формы.
Самы просты спосаб змяніць колер фону амаль кожнага элемента формы з'яўляецца выкарыстанне ўласцівасці фону колеру на ўваходным тэгу. Напрыклад, гэты код прымяняе сіні колер фону (# 9cf) на ўсіх элементах.
уваход {
колер фону: # 9cf;
колер: # 000;
}
Для таго, каб змяніць колер фону толькі некаторых элементаў формы, проста дадайце тэкставае поле і выбраць стыль. Напрыклад:
ўваход, тэкставае поле, абярыце {
колер фону: # 9cf;
колер: # 000;
}
Абавязкова, каб змяніць колер тэксту, калі вы зробіце свой колер фону цёмным. Кантрасныя колеру дапамагаюць зрабіць элементы формы больш пераборлівымі. Напрыклад, тэкст на цёмна-чырвоным фоне значна лягчэй чытаць, калі колер тэксту белы. Напрыклад, гэты код змяшчае белы тэкст на чырвоным фоне.
ўваход, тэкставае поле, абярыце {
колер фону: # c00;
колер: #fff;
}
Вы нават можаце паставіць колер фону на самой форме тэга. Памятаеце , што форма тэг з'яўляецца блокавым элементам , таму колер запаўняе ўвесь прастакутнік, а не толькі размяшчэнне элементаў.
Вы можаце дадаць жоўты фон у блокавы элемент, каб зрабіць вобласць вылучыцца, як гэта:
форма {
колер фону: #ffc;
}
даданне межаў
Як з кветкамі, вы можаце змяніць межы розных элементаў формы. Вы можаце дадаць адну рамку вакол усёй формы. Не забудзьцеся дадаць водступы, ці вашы элементы формы будуць забітыя прама побач з мяжой.
Ніжэй прыведзены прыклад кода для 1-піксельнай чорнай рамкі з 5 пікселямі дапаўненні:
форма {
мяжы: 1px цвёрды # 000;
абіўка: 5px;
}
Вы можаце змясціць мяжы вакол больш, чым проста сама форма. Змена мяжы ўваходных элементаў, каб зрабіць іх вылучыцца:
уваход {
мяжы: 2px пункцірныя # c00;
}
Будзьце асцярожныя, калі вы кладзе мяжы на палях ўводу, як яны выглядаюць менш, як палі ўводу, то, і некаторыя людзі не могуць зразумець, што яны могуць запоўніць форму.
Аб'яднаць стыль Асаблівасць
Паставіўшы разам свае элементы формы думкі і некаторыя CSS, вы можаце стварыць сімпатычную форму, якая дапаўняе дызайн і макет вашага сайта.