如何为 Weather.com 等拼写错误的文本设置样式（虚线下划线而不是波浪线）答案

【问题标题】：How to style misspelled text like Weather.com (Dashed underline instead of squiggle)如何为 Weather.com 等拼写错误的文本设置样式（虚线下划线而不是波浪线）
【发布时间】：2017-04-29 15:46:12
【问题描述】：

Weather.com 是我所知道的唯一一个这样做的例子，在拼写错误的文本下方显示一条红色虚线而不是曲线。这是在 Windows 7 中的 Chrome 上

我想要复制的内容

关于如何做到这一点的任何想法？不幸的是，去检查员会清除该字段中的文本。

大多数网站显示的内容

【问题讨论】：

很确定这是您的浏览器的功能，而不是他们的网站
这不是我在整个网络上的任何其他网站上出现拼写错误的文本的方式。
只需添加一个拼写脚本，它就会自动完成。否则，这是由浏览器根据您设置的语言完成的.. 至少 Windows 会这样做:)
不会发生在我身上 i.imgur.com/pBj2MI4.png (mac/chrome)
它在我的 Chrome/Windows 10 上显示曲线

标签： html css sass

【解决方案1】：

事实证明，这不是一种样式，而是精确大小的文本框/精确调整的行高的效果。波浪线高 2px，但底部 1px 被切掉，看起来像虚线，但实际上并非如此。

此方法可用于复制显示的效果如果您正在使用一种字体，其中延伸到基线以下的字母不会向下太远以至于它们接触到拼写检查曲线。 p>

似乎可以独立于文本移动曲线，这可能会提供一种方法来模拟任何字体的这种样式。

如果我有办法做到这一点，我会进一步更新。

【讨论】：

【解决方案2】：

这是一个浏览器功能，可以使用spellcheck="true" 在输入字段和 contentEditable 元素上实现（至少在 Webkit/Blink 中）。并非每个浏览器都会以相同的方式实现它。为此，您必须自己构建文本标记并结合字典服务（例如 Google Docs 所做的）。

https://jsfiddle.net/bn7pfyf3/

（将“true”更改为“false”，您将看不到焦点上的任何亮点）

在 Webkit/Blink 中，这是一个 DocumentMarker 类型（用于 Ctrl+F、高亮、输入字段中的拼写错误等）。它们没有暴露在 DOM 或 CSS 中。 https://github.com/crosswalk-project/blink-crosswalk/blob/master/Source/core/dom/DocumentMarker.h

【讨论】：