CSSのようなテキストフィールドの波線

Question

グーグルのようなすべてのブラウザのテキストフィールドで波線をどうして得ることができますか？スクリーンショットを参照してください。 ありがとう！

Answer 1

Googleは入力以下スパンとして繰り返しBASE64符号化された画像を使用します。あなたはあなたのスパンにstuffをタイプすることができ、それはその下に表示されます。

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