Волнистая линия в текстовом поле с 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; 
}