引用自己创建的css样式表
在本教程中,我们将逐步介绍样式化基本联系人表单元素的过程。 我们将研究使表单同时美观和功能齐全的不同方法。
这是我们要构建的表单:
1.从页面标记开始
我们将从一个包含一个标题和一个无序列表的form
元素开始。 我们将使用.container
为表单设置最大宽度,并将其内容水平居中:
<form class="my-form">
<div class="container">
<h1>Get in touch!</h1>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</form>
在列表内,我们将放置表单元素。
例如,第一个列表项将包含带有四个选项的select
元素。 默认情况下,第一个选项处于选中状态,但被禁用:
<select>
<option selected disabled>-- Please choose an option --</option>
<option>Request Quote</option>
<option>Send Resume</option>
<option>Other</option>
</select>
在第二个列表项中,我们将放置两个必填的输入字段:
<div class="grid grid-2">
<input type="text" placeholder="Name" required>
<input type="text" placeholder="Surname" required>
</div>
第三个列表项包括一个必填字段和一个可选输入字段:
<div class="grid grid-2">
<input type="email" placeholder="Email" required>
<input type="tel" placeholder="Phone">
</div>
第四个列表项包含一个文本区域:
<textarea placeholder="Message"></textarea>
第五个列表项包含一个复选框及其标签:
<input type="checkbox" id="terms">
<label for="terms">...</label>
最后,第六个列表项包含一个div
元素和两个按钮(类型submit
和reset
):
<div class="grid grid-3">
<div class="required-msg">REQUIRED FIELDS</div>
<button class="btn-grid" type="submit" disabled>
<span class="back">
<img src="IMG_SRC" alt="">
</span>
<span class="front">SUBMIT</span>
</button>
<button class="btn-grid" type="reset" disabled>
<span class="back">
<img src="IMG_SRC" alt="">
</span>
<span class="front">RESET</span>
</button>
</div>
2.定义一些基本样式
在仔细研究各个表单元素之前,我们先定义一些CSS样式。 这些包括一些自定义变量以提供我们的配色方案,以及一些重置规则:
:root {
--white: #afafaf;
--red: #e31b23;
--bodyColor: #292a2b;
--borderFormEls: hsl(0, 0%, 10%);
--bgFormEls: hsl(0, 0%, 14%);
--bgFormElsFocus: hsl(0, 7%, 20%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
a {
color: inherit;
}
input,
select,
textarea,
button {
font-family: inherit;
font-size: 100%;
}
button,
label {
cursor: pointer;
}
select {
appearance: none;
}
select::-ms-expand {
display: none;
}
select:-moz-focusring {
color: transparent !important;
text-shadow: 0 0 0 var(--white);
}
textarea {
resize: none;
}
ul {
list-style: none;
}
注意 :为简单起见,我不会逐步学习本教程中的所有 CSS规则。 您可以通过单击演示项目的CSS选项卡检查其余部分。
3.构建表单布局
在小屏幕上,我们所有的表单元素都会堆叠在一起:
但是,在600像素或更高像素的视口中,表单布局将发生变化。 进一步来说:
- 我们将第二个和第三个列表项的元素排列成两个相等宽度的列。
- 第六个列表项的元素将分为三列。
多亏了CSS Grid,我们可以轻松地构建所需的多列布局。 我们首先将.my-form .grid
容器声明为网格,然后在需要更改的网格项上定义列:
@media screen and (min-width: 600px) {
.my-form .grid {
display: grid;
grid-gap: 1.5rem;
}
.my-form .grid-2 {
grid-template-columns: 1fr 1fr;
}
.my-form .grid-3 {
grid-template-columns: auto auto auto;
align-items: center;
}
}
所有这些规则都放置在媒体查询中,因此它们仅对600像素及以上宽的视口有效。
4.设置表单元素的样式
整理好结构后,接下来我们向所有表单元素添加一些初始的美学样式:
/*CUSTOM VARIABLES HERE*/
.my-form select,
.my-form input,
.my-form textarea,
.my-form button {
width: 100%;
line-height: 1.5;
padding: 15px 10px;
border: 1px solid var(--borderFormEls);
color: var(--white);
background: var(--bgFormEls);
transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}
.my-form textarea {
height: 170px;
}
.my-form ::placeholder {
color: inherit;
opacity: 1;
}
注意:或者,为设置文本区域的宽度和高度,我们可以分别使用其cols
和rows
属性。
添加“聚焦”样式
每当表单元素成为焦点时,我都希望其背景颜色发生变化。 此外,有些元素只是为了强调而扩大了一点:
这样做的方法如下:
/*CUSTOM VARIABLES HERE*/
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:focus {
background: var(--bgFormElsFocus);
}
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
transform: scale(1.02);
}
添加自定义图标
所有必需的元素都在右上角包含一个图标(星号):
同样, select
还包含一个位于右上角的自定义图标(箭头):
我们通过将SVG图标用作背景图片来实现:
.my-form *:required,
.my-form select {
background-repeat: no-repeat;
background-position: center right 12px;
background-size: 15px 15px;
}
.my-form *:required {
background-image: url(asterisk.svg);
}
.my-form select {
background-image: url(down.svg);
}
设置按钮样式
如前所述,在我们的表单中,我们有两种类型的按钮:提交按钮和重置按钮。 如果您重新访问表单标记,则会注意到每个按钮都包含两个元素: .back
元素和.front
元素。
默认情况下,仅其.front
子级出现:
但是,当我们将鼠标悬停在按钮上或当按钮处于焦点上时,就会发生神奇的事情。 具体来说,其背景颜色会发生变化, .front
子项消失,同时.back
子项带有幻灯片动画出现:
以下是负责该行为的样式:
/*CUSTOM VARIABLES HERE*/
.my-form .btn-grid {
position: relative;
overflow: hidden;
transition: filter 0.2s;
}
.my-form button:enabled:hover,
.my-form button:focus {
background: var(--bgFormElsFocus);
}
.my-form button > * {
display: inline-block;
width: 100%;
transition: transform 0.4s ease-in-out;
}
.my-form button .back {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-110%, -50%);
}
.my-form button:enabled:hover .back,
.my-form button:focus .back {
transform: translate(-50%, -50%);
}
.my-form button:enabled:hover .front,
.my-form button:focus .front {
transform: translateX(110%);
}
5.创建一个自定义复选框
如果再次查看第五个列表项中的标记,您会看到复选框的id
值与标签的for
值匹配。 这在两个元素之间创建了关联,这使我们能够构建自定义复选框。
第一步,我们在视觉上隐藏默认复选框:
.my-form input[type="checkbox"] {
position: absolute;
left: -9999px;
}
然后,我们利用标签的::before
和::after
伪元素来生成我们自己的复选框。
因此,首先我们使用::before
伪元素来配置其未检查状态:
然后::after
伪元素与:checked
伪类一起实现其检查状态:
和其他表单元素一样,当复选框处于焦点位置时,我们添加了一些额外的样式。 最后,确保用户可以通过键盘导航访问我们的表单是明智的。
检查以下关联的样式:
/*CUSTOM VARIABLES HERE*/
.my-form input[type="checkbox"] + label {
position: relative;
display: inline-block;
padding-left: 2rem;
transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}
.my-form input[type="checkbox"]:focus + label {
background: var(--bgFormElsFocus);
}
.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after {
content: '';
position: absolute;
}
.my-form input[type="checkbox"] + label::before {
left: 0;
top: 6px;
width: 18px;
height: 18px;
border: 2px solid var(--white);
}
.my-form input[type="checkbox"]:checked + label::before {
background: var(--red);
}
.my-form input[type="checkbox"]:checked + label::after {
left: 7px;
top: 7px;
width: 6px;
height: 14px;
border-bottom: 2px solid var(--white);
border-right: 2px solid var(--white);
transform: rotate(45deg);
}
@media screen and (min-width: 541px) {
.my-form input[type="checkbox"] + label::before {
top: 50%;
transform: translateY(-50%);
}
.my-form input[type="checkbox"]:checked + label::after {
top: 3px;
}
}
值得一提的是,我们还可以使用一些自定义图标来构建所需的复选框。
6.切换按钮的状态
最初,表单按钮被禁用。 这意味着我们无法单击它们或选择它们:
在我们CSS中,我们添加了一些专门针对这些禁用元素的样式,使用户清楚它们无法与之交互:
.my-form *:disabled {
cursor: default;
filter: blur(2px);
}
选中该复选框后,这些按钮将立即变为活动状态:
处理此功能JavaScript代码如下所示:
const checkbox = document.querySelector('.my-form input[type="checkbox"]');
const btns = document.querySelectorAll(".my-form button");
checkbox.addEventListener("change", function() {
const checked = this.checked;
for (const btn of btns) {
checked ? (btn.disabled = false) : (btn.disabled = true);
}
});
结论
就是这样! 这就是我们建造的!
在本教程中,我们介绍了许多样式化联系表单元素的技巧。 尽管我们专注于黑暗模式美学,但是您可以使用这些相同原理来应用任何类型的UI设计。
希望您喜欢我们在这里建立的联系表格,并以此为灵感来开发自己的表格。 一如既往,感谢您的阅读!
引用自己创建的css样式表