引用自己创建的css样式表_使用HTML，CSS和JavaScript创建时尚的深色联系表

引用自己创建的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设计。

希望您喜欢我们在这里建立的联系表格，并以此为灵感来开发自己的表格。 一如既往，感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/create-a-stylish-dark-contact-form-with-html-css-and-javascript--cms-33201

引用自己创建的css样式表