带有 CSS google 的文本字段中的波浪线答案

【问题标题】：Wavy line in text field with CSS google like带有 CSS google 的文本字段中的波浪线
【发布时间】：2017-04-29 15:51:41
【问题描述】：

如何在所有浏览器（如谷歌）的文本字段中获取波浪线？

【问题讨论】：

您希望在什么情况下实现这一目标？因为这显然是您打错字时出现的波浪线
和 google 一样的上下文。它用于文本更正
这是用户方面的。
波浪线是用css创建的。
哦，真的吗？我不知道。

标签： css textfield underline

【解决方案1】：

Google 使用重复的 base64 编码图像作为输入下方的跨度。你可以在你的 span 中输入东西，它会出现在它的下方。

.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;
 }

&lt;span class="error"&gt;hello&lt;/span&gt;

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

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

&lt;span&gt;asdsdfsf&lt;/span&gt;

【讨论】：