input 텍스트입력시 나오는 x 버튼 수정
본문
input 박스에 텍스트 입력시 나오는 x 표시를 다른 이미지로 바꾸고 싶은데
css 파일에 해당부분이 없네요. 어디에서 바꿔야 하나요?
답변 7
<style>
.test::-ms-clear {
display:none;
}
</style>
<input type="text" class="test">
익스에서만 브라우저 자체에서 나오는 버튼 말씀하시는 것 같네요.
대체는 아마 안 될 겁니다. 대신 익스에서는 위처럼 가려 버리시고 실제로 위 역할을 하는 이미지 버튼을 absolute를 줘서 띄우면 되지 않을까 싶네요.
http://exam.dothome.co.kr/temp/wrid_337261.html
알려주신 소스는 삭제버튼이 처음부터 노출이 되어있는 것이고, 제가 찾는 것은 텍스트 입력시에만 나타나는 것이었는데, 원하는 소스를 두달 만에 드디어(..) 찾아서 가장 근접하게 답변주신 분께 채택드립니다. 감사합니다.
캡쳐가 있으면 질문 이해에 도움이 될거 같은데요.
확인이 가능한 캡쳐 이미지(가끔 해상도가 떨어져 보이지 않는 이미지를 올려 주시는 분들이 있어...)
올려 주시고
x가 ---> 다른 이미지로 변경을 원하시는 건지?
아니면
x가 ---> 다른 스타일로 변경을 원하시는 겆니요?
여담으로 브라우저 마다 틀리게 보일수 있는 요소이다 보니 일단 브라우저 별로 확인해 보시고
크게 거슬리지 않는다면 변경하겠다고 에너지를 소비하지 않는게 좋아 보입니다.
결정은 님께서 하시면 되지 싶습니다.
답변으로 이미지 추가했습니다. 이미지든 다른 스타일이든 해당 소스가 있는 파일이 뭔지 알면 바꾸겠는데 어느 파일에 설정되어 있는 건지 못찾겠어요.
검색된 글 중 두번째 열어 보시면 도움 되실만한 내용 있을 겁니다.
URL 좌표를 남겨보세요. 도대체 어떤 X 버튼을 말씀하시는건지?
답변으로 이미지 추가했습니다. input text 타입에 텍스트를 입력하면 입력된 내용을 삭제할 수 있는 x 가 나타나는데 이걸 말합니다. css에는 설정하는 부분이 없어서요..
input 박스에 텍스트를 입력했을 때 입력된 텍스트를 한번에 삭제할 수 있는 우측 x를 말합니다.
이미지로 대체를 하고 싶은데 해당 소스가 어디에 있는지 몰라서요.
css에는 활성화 되었을 때 테두리 설정밖에 없더라고요.
업체에서 디자인을 줬는데 그대로 해달라고 합니다.. -_-;;
CSS에 없으면,
아마도 JS로 처리했을 것 같은데,
인풋창에 사용된 선택자로 검색해보세요..
저건 아무래도 CSS처리한것일것 같은데요, 주소 남겨주시면 CSS 찾아드리겠습니다.
2달만에 원하는 기능의 소스를 겨우 찾았습니다. 혹시나 저같은 분들 위해 올립니다.
* 제이쿼리 스크립트가 포함되어 있어야 함
<style>
input::-ms-clear {display:none;} /*pc에서 보여지는 삭제는 안보이게 처리*/
.header-search-inner {position:relative; width:200px; }
.header-search-inner input {width:100%; height:30px;}
.header-search-inner .search-delete {position:absolute; top:10px; right:0px; display:block; width:16px; height:16px; background:url(btn_search_del.png') no-repeat 0 0; background-size:100%; text-indent:-9999px;}
</style>
<div class="header-search-inner">
<input type="text" placeholder="검색어를 입력해주세요."/>
<a href="javascript:void(0);" class="search-delete">검색어 삭제</a>
</div>
