반응형
[2021.05.07]
Input 박스에 X 표시를 넣는 방법 입니다.
X 표시를 넣었다고 해서 데이터가 삭제되거나 그러지는 않습니다.
HTML
<input id="TEST_ID" class="input_FontSize form-control form-control-sm " autocomplete="off" type="text" />
<span class="searchclear" style="display:none">X</span>
CSS
.TEST_ID[type=text]:-ms-clear{display: none;}
.searchclear {position: absolute;right: 6px;top: 7px;bottom: 15px;width: 10px;height: 14px;margin: auto;font-size: 15px;cursor: pointer;color: #ccc;background-color: #fff;}
JavaScript (Jquery)
$(document).on("keyup",".searchclear",function () {
$(".searchclear").toggle(Boolean($(this).val())); //영역
});
'IT > 퍼블리싱 (html+css)' 카테고리의 다른 글
[HTML] Table 첫행고정 , th 고정 (feat. SlimScrollBar.js) (0) | 2021.05.13 |
---|---|
[HTML]Textarea 영역 크기 조절 없애기 (0) | 2021.03.02 |
[CSS]margin , padding 고정 값 (0) | 2021.01.22 |
[CSS] Background-color 투명 or 배경 없애기 (0) | 2021.01.19 |
[HTML+CSS] 프로그래스 바 생성 (0) | 2019.12.12 |