Научете как да подобрите вида на уебсайта си
Изучаването на стиловите форми с CSS е чудесен начин да подобрите външния вид на уебсайта си. HTML формулявете са безспорно сред най-грозните неща в повечето уеб страници. Те често са скучни и утилитарни и не предлагат много в начина на стил.
С CSS това може да се промени. Комбинирането на CSS с по-модерните етикети на формуляри може да достави някои хубави форми.
Променете цветовете
Точно както с текста, можете да промените цветовете на преден план и фона на елементите на формуляра.
Лесен начин да промените цвета на фона на почти всеки елемент от формуляра е да използвате свойството цвят на фона на входния маркер. Например, този код прилага син цвят на фона (# 9cf) върху всички елементи.
вход {
цвят на фона: # 9cf;
цвят: # 000;
}
За да промените цвета на фона само на определени елементи от формуляра, просто добавете textarea и изберете стила. Например:
въвеждане, textarea, изберете {
цвят на фона: # 9cf;
цвят: # 000;
}
Не забравяйте да промените цвета на текста, ако направите цвета на фона си тъмен. Контрастиращите цветове помагат да се направят елементите на формата по-четливи. Например, текстът на цвят с тъмночервен фон се чете много по-лесно, ако цветът на текста е бял. Например, този код поставя бял текст на червен фон.
въвеждане, textarea, изберете {
цвят на фона: # c00;
цвят: #fff;
}
Можете дори да поставите цвят на фона върху самия маркер на формуляра. Не забравяйте, че етикетът на формуляра е блоков елемент , така че цветът се попълва в целия правоъгълник, а не само местоположенията на елементите.
Можете да добавите жълт фон към блоков елемент, за да направите района да изпъкне така:
форма {
цвят на фона: #ffc;
}
Добавяне на граници
Както и при цветовете, можете да промените границите на различни елементи от формата. Можете да добавите една граница около целия формуляр. Не забравяйте да добавите подложка или елементите на формуляра ви ще бъдат засечени до границата.
Ето пример за код за 1-пикселна черна граница с 5 пиксела подложка:
форма {
граница: 1px масив # 000;
подложка: 5px;
}
Можете да поставяте границите около нещо повече от самата форма. Променете границата на елементите за въвеждане, за да се разграничат:
вход {
граница: 2px dashed # c00;
}
Бъдете внимателни, когато поставяте граници върху входните полета, тъй като те изглеждат по-малко като входни кутии, а някои хора може да не осъзнаят, че могат да попълнят формуляра.
Комбинирайте функциите на стила
Чрез обединяването на формулярните елементи с мисълта и някои CSS, можете да създадете хубава форма, която допълва дизайна и оформлението на вашия сайт.