텍스트 상자에 지우기 버튼을 설정하는 방법
- 不言원래의
- 2018-12-04 16:57:525679검색
때때로 텍스트 상자 오른쪽에 ×가 있는 원이 표시되는 경우가 있습니다. 이것은 실제로 지우기 버튼입니다. 그러면 텍스트 상자에 이 지우기 버튼을 구현하는 방법은 무엇입니까? 다음 글에서는 텍스트 상자에 지우기 버튼을 설정하는 방법을 소개합니다.
먼저 클리어 버튼 설정의 구체적인 예를 살펴보겠습니다
코드는 다음과 같습니다
HTML code
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
<!--
function ClearButton_Click(){
this.searchForm.searchBox.value="";
}
-->
</script>
</head>
<body>
<form action="" name="searchForm">
<div class="searchFrame">
<input type="text" id="search" name="searchBox" value="" class="inputBox"/>
<div class="clearButton" onclick="ClearButton_Click()"></div>
</div>
</form>
</body>
</html>CSS code
style.css
.searchFrame{
position: relative;
display: inline-block;
}
.inputBox{
padding-right: 20px;
width:120px;
}
.searchFrame .clearButton{
width: 13px;
height: 13px;
position: absolute;
right: 2px;
top: 1px;
background: url(img/d.jpg) no-repeat left center;
cursor: pointer;
}Instructions
In 위의 코드, 텍스트 상자에서 그 주위에 "searchFrame" 프레임을 준비합니다. "searchFrame" 프레임의 오른쪽 끝에 지우기 버튼을 배치합니다. 올바른 속성을 설정하여 스타일시트의 오른쪽 끝에 배치하세요. "searchFrame" 프레임은 "display:inline-block"으로 지정되며 텍스트 상자를 촘촘하게 둘러싸는 프레임입니다.
실행 결과
는 브라우저에 다음과 같이 표시됩니다
일반 텍스트 상자처럼 문자를 입력할 수 있습니다. 마우스 포인터를 맨 오른쪽의 [×] 아이콘으로 이동하면 포인터 모양이 변경됩니다. 이때 클릭하면 텍스트 상자의 내용이 삭제됩니다.
이 기사는 여기서 끝납니다. 더 많은 관련 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 CSS Video Tutorial 열로 이동하여 자세히 알아보세요. ! !
위 내용은 텍스트 상자에 지우기 버튼을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.