文字字段中的波浪线与CSS google一样

Question

如何在所有浏览器（如谷歌）的文本字段中获取波浪线？见截图。 非常感谢！

Answer 1

Google使用重复的base64编码图像作为输入下方的跨度。您可以在您的范围内输入内容，它将显示在其下方。

.error:hover {
    background: url(data:image/gif;base64,R0lGODlhCgAEAMIEAP9BGP6pl//Wy/7//P///////////////yH5BAEKAAQALAAAAAAKAAQAAAMROCOhK0oA0MIUMmTAZhsWBCYAOw==) repeat-x scroll 0 100% transparent;
    display: inline-block;
    padding-bottom: 1px;
 }

<span class="error">hello</span>

免责声明：您必须将鼠标悬停在跨度上才能显示效果。

Answer 2

如上所述here;

内容：

 .underline:after {
  content: '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~';
  position: absolute;
  width: 100%;
  left:0;
  overflow: hidden;
  top:100%;
  margin-top: -.25em;
  letter-spacing:-.25em;
}

或带图片：

.underline {
    display: inline-block;
    position:relative;
    background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x;
}

Answer 3

尝试使用text-decoration和text-decoration-skip-ink。

text-decoration-skip-ink: none;可以绘制在文本内容的整个长度上。

span {
  text-decoration: red wavy underline;
  text-decoration-skip-ink: none;
}

<span>asdsdfsf</span>