[分享]css中如何给表单设置颜色

pre { background-color: #f5f5f5; padding: 10px; border-radius: 5px; overflow: auto; font-size: 16px; } p { font-size: 18px; line-height: 1.5; } .form-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 30px 0; } input[type=text], input[type=email], input[type=password] { width: 100%; margin: 10px 0; padding: 10px; border-radius: 5px; border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } input[type=submit] { width: 100%; margin: 10px 0; padding: 10px; border-radius: 5px; border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background-color: #0077b6; color: #fff; font-weight: bold; cursor: pointer; }

让表单的颜色看起来更加美观和统一是很重要的，下面介绍一下如何通过CSS来设置表单的颜色。

首先，我们需要设置表单包裹容器的样式。这里我们设置一个 .form-wrapper 类，使用 display: flex; 让表单中的元素可以水平居中，并使用 margin: 30px 0; 设置上下间距为 30px。

.form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
} 

然后，我们需要设置表单中的各个元素的样式。这里我们针对 input[type=text], input[type=email], input[type=password] 和 input[type=submit] 进行样式设置。

input[type=text], input[type=email], input[type=password] {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

input[type=submit] {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    background-color: #0077b6;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
} 

在这里，我们给表单中的文本框设置了圆角、阴影和白色背景，并设置了间距和宽度为100%。给提交按钮设置了圆角、阴影、背景颜色和文字颜色。

通过对表单容器和元素设置样式，可以让表单看起来更加美观和优雅。