文本字段中的波浪线与CSS谷歌如

Question

如何才能在所有浏览器的文本字段中获得波浪线，如谷歌？看截图。 非常感谢！

Answer 1

谷歌使用编码的图像作为输入下面的跨度重复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; 
}