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

Question

如何在所有浏览器的文本字段中获取波浪线，例如 google？

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 and text-decoration-skip-ink。

text-decoration-skip-ink: none;可以绘制横跨全文内容

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

<span>asdsdfsf</span>

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

Wavy line in text field with CSS google like

css

underline

textfield