# [CSS] 表单 Css 样式

原 youtube 视频链接：[Form Styling Essentials | The basics to modern CSS tips & tricks](https://www.youtube.com/watch?v=nuDpLN2dazU)

## `accent-color`

详情可以参考 mdn：[accent-color - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color)

目前 `accent-color` 只能影响一些表单元素的颜色：

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748765825787/29718ac9-e6d0-4a0a-bb6f-43bf7a8bd81e.png align="center")

而且这个属性目前还存在兼容性问题，参考 caniuse：["accent-color" | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/?search=accent-color)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748765843906/c39f1dce-84da-426b-8b4a-c18c9f96cbbe.png align="center")

## `font: inherit`

默认情况下， `font` 属性是默认继承父元素的值的。参考 stack overflow 上的文章：[css - What is the purpose of using font: inherit? - Stack Overflow](https://stackoverflow.com/questions/12880536/what-is-the-purpose-of-using-font-inherit)

但是也是有例外的，例如表单元素，参考我写的 jsFiddle 上的 demo：[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/9r3zt7d2/36/)

可以看到，如果表单元素不使用 `font: inherit` 的话，`input` 框中的字体样式是有区别的：

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748765120527/5785d916-d62c-4567-ad16-8aa2641b6613.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748765142646/27bd8062-7cae-4081-86bd-1f0fe0d35166.png align="left")

代码具体如下：

```xml
<div class="container">
  <div class="form__group">
    <label for="first">FIRST</label>
    <input name="first"/>
  </div>
</div>

<style>
    .form__group {
      color: skyblue;
      font-family: Georgia;
      font-weight: 700;
      line-height: 20px;
    }

    label,
    input {
      /* font: inherit; */
    }
</style>
```

> 思考：虽然如上面所说，`font` 属性是默认继承父元素的值的，但是也有像表单这样的例外，不过目前我只了解到有表单是这样的，所以如果后面碰到了默认没有继承父元素的 `font` 的，也可以尝试用 `inherit`

## 长度、高度单位

* `ch` ：表示你所使用的字体中的一个字符 “0” 的宽度（不要认为是任意一个字符的宽度，因为会不等宽字体）
    
    * 参考 medium 的文章：[What is the CSS ‘ch’ Unit?. I keep seeing authors and speakers… | by Eric A. Meyer | Medium](https://medium.com/@meyerweb/what-is-the-css-ch-unit-20b999426ac0)
        
* `lh` ：以 line-height 为基准的高度
    
    * 有一定的兼容性问题：["lh" | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/?search=lh)
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748766598105/a064e31b-2001-4a17-b01a-df4dec161063.png align="center")
        
* `cap` ：基于一个大写字母的高度； `ex` ：基于一个小写字母的高度
    
    * 参考一篇很不错的文章：[CSS Cap Unit](https://ishadeed.com/article/css-cap-unit/)
        
    * `ex` 的兼容性不错，但 `cap` 的不太行：
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748768042750/0082a365-5121-4dc3-ad66-5d343d99ede5.png align="center")
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748767972132/0e574a9c-7eae-46b0-9f57-5a22e3826bc2.png align="center")