반응형
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}
반응형
'퍼블리싱 > css' 카테고리의 다른 글
[css] mix-blend-mode : 해당요소를 배경과 부모가 혼합 css설정 (0) | 2023.10.18 |
---|---|
[css] 레이어팝업 내부 transform:translate(-50%,-50%) 흐림 버그 해결방법! (0) | 2021.09.08 |
[html, css] 체크박스, 라디오 디자인 커스텀(checkbox, radio 변경) (0) | 2021.05.13 |
[css] 스크롤 가능하나, scrollbar 숨기기 (0) | 2020.02.12 |
[html, css] 크롬에서 input 자동완성 끄기. (0) | 2020.02.11 |