样式表单与CSS

学习改善您的网站外观

学习如何使用CSS设计表单是改善网站外观的好方法。 HTML表单可以说是大多数网页上最丑陋的事情之一。 他们往往无聊和功利,并没有提供很多风格的方式。

随着CSS,可以改变。 将CSS与更高级的表单标签相结合可以提供一些漂亮的表单。

更改颜色

就像文本一样,您可以更改表单元素的前景和背景颜色。

几乎所有表单元素的背景颜色都可以通过简单的方式使用输入标签上的background-color属性。 例如,此代码在所有元素上应用蓝色背景色(#9cf)。

输入{
background-color:#9cf;
颜色:#000;
}

要仅更改某些表单元素的背景色,只需添加textarea并选择样式即可。 例如:

输入,textarea,选择{
background-color:#9cf;
颜色:#000;
}

如果您使背景颜色变暗,请务必更改文字颜色。 对比色有助于使表单元素更清晰。 例如,如果文本颜色是白色,则深红色背景颜色的文本更容易阅读。 例如,此代码将白色文本放在红色背景上。

输入,textarea,选择{
background-color:#c00;
颜色:#fff;
}

你甚至可以在窗体标签上添加背景颜色。 请记住,表单标记是一个块元素 ,所以颜色填充整个矩形,而不仅仅是元素的位置。

您可以为块元素添加黄色背景以使区域突出,如下所示:

形式{
background-color:#ffc;
}

添加边框

与颜色一样,您可以更改各种表单元素的边框。 您可以在整个表单中添加单个边框。 一定要添加填充,否则您的表单元素将被堵塞在边界旁边。

下面是一个用5像素填充的1像素黑色边框的代码示例:

形式{
border:1px solid#000;
填充:5px;
}

你可以把边界放在不仅仅是表单本身上。 更改输入项目的边框以使其突出显示:

输入{
边框:2px虚线#c00;
}

当你在输入框上放置边框时要小心,因为它们看起来不像输入框,有些人可能没有意识到它们可以填写表单。

组合样式功能

通过将您的表单元素与想法和一些CSS放在一起,您可以设置一个漂亮的外观来补充网站的设计和布局。