用accent-color简化表单样式

> 新的CSS accent-color属性使得我们可以通过利用用户代理样式，快速而简单地将品牌颜色推广到某些表单输入。在这篇文章中，我们将看看它的作用，以及如何将它与color-scheme一起用于简单的、可访问的复选框和单选按钮--并想象一下我们将来会如何使用它。

我不知道你怎么想的，但我喜欢新的CSS属性的出现，它使我们作为开发者的日常生活变得更简单，并使我们能够删除大量的冗余代码。aspect-ratio就是这样一个属性（最近消除了对padding hack的需求）。
![1-simplifying-form-styles-accent-color.jpg](http://www.guobacai.com/usr/uploads/2021/11/1323455250.jpg)

## **表单输入的风格化 **
让我们来看看复选框。在每个浏览器中，用户代理样式表（负责浏览器的默认样式）会对这些复选框进行不同的样式处理。
![2-simplifying-form-styles-accent-color.jpg](http://www.guobacai.com/usr/uploads/2021/11/1710762433.jpg)

从历史上看，没有任何真正的方法来设计这些输入。相反，许多网络开发者采用了一种众所周知的黑客手段，即从视觉上（但可访问）隐藏输入本身，然后在标签上设置一个伪元素的样式。(所有这些也适用于单选按钮）。

html 代码
```
<div class="wrapper">
  <form action="">
    <fieldset>
      <legend>Choose your berries</legend>
      <div class="form__group" style="--i: 1">
        <input type="checkbox" id="berries_1" value="strawberries" name="berries">
        <label for="berries_1">Strawberries</label>
      </div>
      <div class="form__group" style="--i: 2">
        <input type="checkbox" id="berries_2" value="blueberries" name="berries">
        <label for="berries_2">Blueberries</label>
      </div>
      <div class="form__group" style="--i: 3">
        <input type="checkbox" id="berries_3" value="bananas" name="berries">
        <label for="berries_3">Bananas (yes, they are berries)</label>
      </div>
      <div class="form__group" style="--i: 4">
        <input type="checkbox" id="berries_4" value="blackberries" name="berries">
        <label for="berries_4">Blackberries</label>
      </div>
      <div class="form__group" style="--i: 5">
        <input type="checkbox" id="berries_5" value="loganberries" name="berries">
        <label for="berries_5">Loganberries</label>
      </div>
    </fieldset>
  </form>
</div>
```

css代码
```
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: "Open Sans", sans-serif;
}

.wrapper {
  max-width: 35rem;
  width: 100%;
}

fieldset > * + * {
  margin-top: 0.5rem;
}

legend {
  font-weight: 700;
}

input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

label {
  display: flex;
  align-items: center;
}

label::before {
  content: '';
  width: 1em;
  height: 1em;
  padding: 0.2em;
  border: 2px solid;
  margin-right: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

input:checked + label::before {
  content: '✓';
  background-color: lime;
  border: 2px solid lime;
}
```

这实际上比过去的解决方案要少一些啰嗦。ModernCSS有一个详细的教程，介绍如何使用这种技术实现自定义复选框和单选按钮。

这种技术可以跨浏览器使用，如果复选框需要完全自定义（有动画等），仍然需要这种技术。但在许多情况下，我们不需要任何花哨的造型--我们只需要能够应用一个品牌颜色，然后继续前进。摆脱所有这些笨重的CSS不是很好吗？进入accent-color!

简单的使用 #
对于最简单的使用情况，我们可以在:root元素上设置accent-color属性，并让它在我们的网页上到处应用。
```
:root {
  accent-color: rgba(250, 15, 117);
}
```
这将所选择的颜色应用于（在撰写本文时）复选框、单选按钮、范围和进度元素。

![3-simplifying-form-styles-accent-color.jpg](http://www.guobacai.com/usr/uploads/2021/11/2707909680.jpg)

## 可访问性 
一个相当酷的特点是，浏览器会自动确定复选标记的最佳颜色，以确保有足够的颜色对比，使用它自己的内部算法。这意味着不需要额外的代码造型来确保我们的复选框尽可能地无障碍。

在下面的演示中，我们应用了两种不同的重点颜色。如果你在Chrome浏览器中查看，你应该看到左边那个复选标记是白色的，而右边的是黑色的。浏览器对此使用不同的算法，所以你在Chrome和Firefox中可能会遇到不同的结果。
html代码
```
<div class="wrapper">
  <h1>Accent-color is cool</h1>
  <div class="grid">
    <form action="">
      <fieldset>
        <legend>Choose your berries</legend>
        <div class="form__group">
          <input type="checkbox" id="berries_1" value="strawberries" name="berries">
          <label for="berries_1">Strawberries</label>
        </div>
        <div class="form__group">
          <input type="checkbox" id="berries_2" value="blueberries" name="berries">
          <label for="berries_2">Blueberries</label>
        </div>
        <div class="form__group">
          <input type="checkbox" id="berries_3" value="bananas" name="berries">
          <label for="berries_3">Bananas (yes, they are berries)</label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Choose your delivery preference</legend>
        <div class="form__group">
          <input type="radio" id="delivery_1" value="collect" name="delivery">
          <label for="delivery_1">Collect in store</label>
        </div>
        <div class="form__group">
          <input type="radio" id="delivery_2" value="home-delivery" name="delivery">
          <label for="delivery_2">Home delivery</label>
        </div>
      </fieldset>

<div class="form__group">
        <label for="progress">Order progress</label>
        <progress id="progress" max="100" value="70">70%</progress>
      </div>

<div class="form__group">
        <label for="range">How satisfied are you with the service?</label>
        <input type="range" min="0" max="10" value="5" id="range_a">
      </div>
    </form>
    <form action="">
      <fieldset>
        <legend>Choose your berries</legend>
        <div class="form__group">
          <input type="checkbox" id="berries_1b" value="strawberries" name="berries">
          <label for="berries_1b">Strawberries</label>
        </div>
        <div class="form__group">
          <input type="checkbox" id="berries_2b" value="blueberries" name="berries">
          <label for="berries_2b">Blueberries</label>
        </div>
        <div class="form__group">
          <input type="checkbox" id="berries_3b" value="bananas" name="berries">
          <label for="berries_3b">Bananas (yes, they are berries)</label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Choose your delivery preference</legend>
        <div class="form__group">
          <input type="radio" id="delivery_1b" value="collect" name="delivery">
          <label for="delivery_1b">Collect in store</label>
        </div>
        <div class="form__group">
          <input type="radio" id="delivery_2b" value="home-delivery" name="delivery">
          <label for="delivery_2b">Home delivery</label>
        </div>
      </fieldset>

<div class="form__group">
        <label for="progress_b">Order progress</label>
        <progress id="progress_b" max="100" value="70">70%</progress>
      </div>

<div class="form__group">
        <label for="range_b">How satisfied are you with the service?</label>
        <input type="range" min="0" max="10" value="5" id="range_b">
      </div>
    </form>
  </div>
</div>
```
css代码
```
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  accent-color: lime;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 3rem;
}

.wrapper {
  max-width: 75rem;
  width: 100%;
  padding: min(3rem, 5vw);
}

form {
  padding: 1.5rem;
  background-color: rgba(245, 245, 245);
  border-radius: 0.5rem;
}

legend {
  font-weight: 700;
}

fieldset > * + * {
  margin-top: 0.5rem;
}

form > * + * {
  margin-top: 1.5rem;
}

.form__group {
  display: flex;
  align-items: center;
}

input[type="checkbox"],
input[type="radio"]{
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.65rem;
}

input[type="range"],
progress {
  margin-left: auto;
  flex: 0 1 50%;
}

form:nth-child(2n) {
  accent-color: blue;
}
```
## 自定义属性 
如果我们想把同样的颜色应用于其他的UI元素，我们可以使用一个自定义属性。我们可以将我们的颜色设置为根元素上的自定义属性，然后将其应用于（例如）标题，或其他表单元素。
```
:root {
  --brand: rgba(250, 15, 117);
  accent-color: var(--brand);
}
```

html代码
```
<div class="wrapper">
  <h1>Accent-color is cool</h1>
  <form action="">
    <fieldset>
      <legend>Choose your berries</legend>
      <div class="form__group" style="--i: 1">
        <input type="checkbox" id="berries_1" value="strawberries">
        <label for="berries_1">Strawberries</label>
      </div>
      <div class="form__group" style="--i: 2">
        <input type="checkbox" id="berries_2" value="blueberries">
        <label for="berries_2">Blueberries</label>
      </div>
      <div class="form__group" style="--i: 3">
        <input type="checkbox" id="berries_3" value="bananas">
        <label for="berries_3">Bananas (yes, they are berries)</label>
      </div>
      <div class="form__group" style="--i: 4">
        <input type="checkbox" id="berries_4" value="blackberries">
        <label for="berries_4">Blackberries</label>
      </div>
      <div class="form__group" style="--i: 5">
        <input type="checkbox" id="berries_5" value="loganberries">
        <label for="berries_5">Loganberries</label>
      </div>
    </fieldset>
  </form>
</div>
```
css代码
```
* {
  box-sizing: border-box;
}

:root {
  --brand: rgba(250, 15, 117);
  accent-color: var(--brand);
}

body {
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.wrapper {
  width: 100%;
  max-width: 35rem;
}

fieldset {
  border: 2px solid var(--brand);
}

legend {
  font-weight: 700;
  color: var(--brand);
}

fieldset > * + * {
  margin-top: 0.5rem;
}

.form__group {
  display: flex;
  align-items: center;
}

input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.65rem;
}
```
我们甚至可以创造一些有趣的效果。在下面的演示中，我们使用HTML中的style属性，为每个复选框组分配一个与元素的索引（--i）相对应的自定义属性。然后我们在CSS中使用它来计算HSL颜色函数中的色调值，以确定重点颜色。彩虹复选框!

body {
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.wrapper {
  max-width: 35rem;
  width: 100%;
}

legend {
  font-weight: 700;
}

fieldset > * + * {
  margin-top: 0.5rem;
}

.form__group {
  --hue: calc(var(--i) * 30deg + 150deg);
  
  display: flex;
  align-items: center;
  accent-color: hsl(var(--hue, 0), 80%, 50%);
/*  color: hsl(var(--hue, 0), 70%, 50%); */
}

input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.65rem;
}
```

## 其他表格元素 
不幸的是，accent-color并没有应用于我们所期望的其他元素，比如选择下拉框。我们可能想把我们选择的颜色应用到已经有风格的表单元素，比如按钮和文本输入。自定义属性在这里很有用，因为我们可以把它应用到文本输入的边框和按钮的背景上，比如说。
html代码
```
<div class="wrapper">
  <h1>Accent-color is cool</h1>
  <form action="">
    <div class="form__group form__group--stacked">
      <label for="name">Name</label>
      <input type="text" id="name">
    </div>
    <fieldset>
      <legend>Choose your berries</legend>
      <div class="form__group" style="--i: 1">
        <input type="checkbox" id="berries_1" value="strawberries">
        <label for="berries_1">Strawberries</label>
      </div>
      <div class="form__group" style="--i: 2">
        <input type="checkbox" id="berries_2" value="blueberries">
        <label for="berries_2">Blueberries</label>
      </div>
      <div class="form__group" style="--i: 3">
        <input type="checkbox" id="berries_3" value="bananas">
        <label for="berries_3">Bananas (yes, they are berries)</label>
      </div>
      <div class="form__group" style="--i: 4">
        <input type="checkbox" id="berries_4" value="blackberries">
        <label for="berries_4">Blackberries</label>
      </div>
      <div class="form__group" style="--i: 5">
        <input type="checkbox" id="berries_5" value="loganberries">
        <label for="berries_5">Loganberries</label>
      </div>
    </fieldset>
    <button type="submit">Place order</button>
  </form>
</div>
```
css代码
```
* {
  box-sizing: border-box;
}

:root {
  --brand: rgba(250, 15, 117);
  accent-color: var(--brand);
}

body {
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.wrapper {
  width: 100%;
  max-width: 35rem;
}

fieldset {
  border: 2px solid var(--brand);
}

legend {
  font-weight: 700;
  color: var(--brand);
}

form > * + * {
  margin-top: 1.5rem;
}

fieldset > * + * {
  margin-top: 0.5rem;
}

.form__group {
  display: flex;
  align-items: center;
}

.form__group--stacked {
  display: block;
}

.form__group--stacked label {
  display: block;
  margin-bottom: 0.65em;
}

input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.65rem;
}

input[type="text"] {
  border: 2px solid var(--brand);
  border-radius: 0.4em;
  padding: 0.75em;
  width: 100%;
  max-width: 20rem;
}

button {
  border: none;
  background-color: var(--brand);
  color: white;
  padding: 0.75em 1.5em;
  font-size: inherit;
  border-radius: 0.4em;
}
```
Web.dev文档中的accent-color包括Adam Argyle编写的这个方便的片段，用于对其他不属于表单的元素进行造型，包括列表标记、文本选择高亮和焦点环。
```
html { 
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button, 
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}
```
## 颜色方案 
为了进一步定制我们的表单元素，color-scheme属性可以帮助我们根据用户对浅色或深色模式的偏好来设计它们的样式。目前，我们可以通过prefers-color-scheme媒体查询，根据用户的系统偏好提供深色模式的样式。
```
/* 
    If the user's preference is set to 'dark', this renders white text on a black background
*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }
}
```
如果我们不这样做，我们的复选框在未选中的状态下仍然会有一个浅色的背景。
![4-simplifying-form-styles-accent-color.jpg](http://www.guobacai.com/usr/uploads/2021/11/2993814368.jpg)

我们可以使用color-scheme来确保我们的复选框根据喜好采用浅色或深色的风格。在我们的CSS中把它设置在根元素上可以确保它适用于整个页面。
```
:root {
  color-scheme: light dark;
}
```
这表达了按偏好顺序排列的色彩方案。另外，我们也可以在HTML中使用元标签来实现它。
```
<meta name="color-scheme" content="light dark">
```
这实际上是比较好的，因为它将在CSS文件被解析和执行之前立即被浏览器读取--因此可以帮助我们避免出现无样式内容的闪光（FOUC）。

在我们的彩虹复选框演示中，你可能会注意到，当我们切换颜色方案时，浏览器也会调整一些复选标记的颜色，同时仍然保持足够的对比。相当酷啊!

color-scheme会影响到用户代理的样式。如果我们使用它而不为页面提供其他背景颜色或文本颜色样式，那么如果用户选择了深色方案，页面的默认颜色就会被颠倒过来--所以默认的背景颜色将是黑色，而文本颜色将是白色。在实践中，我们很可能想用CSS来覆盖这些。我们可以在使用prefers-color-scheme媒体查询的同时使用color-scheme。在这个演示中，我使用prefers-color-scheme来设置文本颜色，只有在喜欢深色方案的情况下。

:root {
  color-scheme: light dark;
}

body {
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.wrapper {
  max-width: 35rem;
  width: 100%;
}

legend {
  font-weight: 700;
}

fieldset > * + * {
  margin-top: 0.5rem;
}

.form__group {
  --hue: calc(var(--i) * 30deg + 150deg);
  
  display: flex;
  align-items: center;
  accent-color: hsl(var(--hue, 0), 80%, 50%);
}

input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.65rem;
}

@media (prefers-color-scheme: dark) {
  .form__group {
    color: hsl(var(--hue, 0), 80%, 80%);
  }
}
```
color-scheme也可以在单个元素上设置，如果我们在设计中的某些区域希望保留一个指定的颜色方案，不管浅色或深色模式是否被切换，这就很有用。在这个演示中，我们有一个带有深色背景的表单，即使整体配色方案是浅色的。我们可以指定一个深色方案，以确保我们的复选框在任何时候都是以深色为风格的。
```
.dark-form {
  color-scheme: dark;
}
```

html代码
```
<div class="wrapper">
  <h1>Accent-color is cool</h1>
  <div class="grid">
    <form action="">
      <fieldset>
        <legend>Choose your berries</legend>
        <div class="form__group">
          <input type="checkbox" id="berries_1" value="strawberries" name="berries">
          <label for="berries_1">Strawberries</label>
        </div>
        <div class="form__group">
          <input type="checkbox" id="berries_2" value="blueberries" name="berries">
          <label for="berries_2">Blueberries</label>
        </div>
        <div class="form__group">
          <input type="checkbox" id="berries_3" value="bananas" name="berries">
          <label for="berries_3">Bananas (yes, they are berries)</label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Choose your delivery preference</legend>
        <div class="form__group">
          <input type="radio" id="delivery_1" value="collect" name="delivery">
          <label for="delivery_1">Collect in store</label>
        </div>
        <div class="form__group">
          <input type="radio" id="delivery_2" value="home-delivery" name="delivery">
          <label for="delivery_2">Home delivery</label>
        </div>
      </fieldset>

<div class="form__group">
        <label for="progress">Order progress</label>
        <progress id="progress" max="100" value="70">70%</progress>
      </div>

<div class="form__group">
        <label for="progress_b">Order progress</label>
        <progress id="progress_b" max="100" value="70">70%</progress>
      </div>

body {
  font-family: "Open Sans", sans-serif;
  accent-color: lime;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 3rem;
}

.wrapper {
  max-width: 75rem;
  width: 100%;
  padding: min(3rem, 5vw);
}

form {
  padding: 1.5rem;
  background-color: rgba(245, 245, 245);
  border-radius: 0.5rem;
}

legend {
  font-weight: 700;
}

fieldset > * + * {
  margin-top: 0.5rem;
}

form > * + * {
  margin-top: 1.5rem;
}

.form__group {
  display: flex;
  align-items: center;
}

input[type="checkbox"],
input[type="radio"]{
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.65rem;
}

input[type="range"],
progress {
  margin-left: auto;
  flex: 0 1 50%;
}

form:nth-child(2n) {
  color-scheme: dark;
  background-color: black;
  color: white;
}
```
## 限制 
如前所述，目前有几个元素不受accent-color的影响，对于这些元素来说，这个功能会很有用。另一个考虑因素是，我们目前只能对复选框或单选按钮的选中状态进行造型--除了使用color-scheme，它对复选框的边框有一些影响，但不允许完全自定义。如果能够为未选中状态下的输入设置边框的颜色和厚度，或者实现更多的自定义样式，比如改变整体形状，那就更好了，但我们还没有达到这个要求。至少，允许复选框的边框继承正文的颜色会更好。

如果能够将accent-color的使用扩展到表单以外的其他元素，如视频控件，也会很有用。目前，对于开发者来说，创建自定义控件需要大量的工作，以便重新创建本地控件的可访问性。Stephanie Stimac的这篇优秀文章详细介绍了Open UI正在进行的标准化UI元素的工作，以使开发者更容易对其进行样式设计。

## 替代方案 
为复选框或单选按钮设计样式的另一种方法是用-webkit-appearance: none来隐藏默认样式，然后用背景图片来代替它。(请看这个演示。)现代浏览器对此支持得很好，但与第一种使用伪元素的方法（本文开头所述）相比，它有其局限性，因为我们不能直接用CSS操作背景图片（例如改变其颜色或不透明度），也不能过渡图片。

CSS绘画API--胡迪尼（Houdini）CSS API集的一部分--开辟了更多的自定义选项，允许我们传入自定义属性来操纵背景图像。请看Matteo制作的这个可爱的演示（和附带的worklet）。目前，支持仅限于Chromium浏览器。

## 可访问性 
在使用隐藏表单控件的默认外观时，我们应该注意提供可访问的焦点样式。accent-color的一个优点是它不会隐藏浏览器的默认值，保留了可访问性。

## 浏览器支持
目前，Chrome和Edge的最新版本都支持重音色。它可以在Firefox中通过layout.css.accent-color.enabled标志启用，并将在下一个版本中得到支持。不幸的是，目前还没有Safari浏览器的支持。这并不是说你不能马上开始使用它--不支持口音颜色的浏览器会简单地获得浏览器的默认值，所以它作为渐进式增强效果很好。

## 总结
我们在这里主要讨论了复选框和单选按钮，因为它们是最常见的需要定制的表单元素。但是，重音颜色有可能为我们的许多表单元素提供快速和简单的样式，特别是在不需要广泛定制的地方，以及允许浏览器选择最佳的可访问性选项。

用accent-color简化表单样式

评论已关闭