CSS가있는 텍스트 입력란에 물결 모양 줄이 있습니다.

Question

google과 같은 모든 브라우저에서 텍스트 입력란에 물결 모양 선을 표시하는 방법은 무엇입니까? 스크린 샷을 참조하십시오. 감사합니다.

Answer 1

구글 입력 이하의 범위로 화상을 인코딩 반복베이스 64을 사용한다. 범위에 내용을 입력하면 그 아래에 내용이 표시됩니다.

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