文本字段中的波浪線與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; 
}