퍼블리싱/css

input, textarea 태그 크롬에서 placeholder keyup 지우기

에밀리 시하 2021. 2. 17. 22:04
반응형

input과 textarea 태그에서 placeholder를 사용할때, 

ie에서는 keyup, 즉 커서를 올리면 placeholder가 지워집니다.

하지만 크롬에서는 텍스트를 써야지만 지워지는 데, 이럴때 ie랑 통일 시켜달라고 할때가 있습니다.

그럴때는 css로 간단하게 해결하는 방법이있습니다.

 

<input type="text" name="" id="" class="inp" placeholder="검색어를 입력해주세요.">

<textarea name="" id="" cols="30" rows="10" class="textarea_inp" placeholder="100자이내로 써주세요."></textarea>
/* 크롬 */
input:focus::-webkit-input-placeholder {color:transparent}
textarea:focus::-webkit-input-placeholder {color:transparent}

/* 사파리 */
input:focus::-moz-input-placeholder {color:transparent}
textarea:focus::-moz-input-placeholder:focus {color:transparent}

/* 크롬, 오페라, 사파리, 익스 */
input:focus::placeholder {color:transparent}
textarea:focus::placeholder {color:transparent}

 

반응형