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%。给提交按钮设置了圆角、阴影、背景颜色和文字颜色。
通过对表单容器和元素设置样式,可以让表单看起来更加美观和优雅。