텍스트 상자에 지우기 버튼을 설정하는 방법-CSS 튜토리얼-php.cn

텍스트 상자에 지우기 버튼을 설정하는 방법

不言

풀어 주다： 2018-12-04 17:05:54

원래의

5561명이 탐색했습니다.

때때로 텍스트 상자 오른쪽에 ×가 있는 원이 표시되는 경우가 있습니다. 이것은 실제로 지우기 버튼입니다. 그러면 텍스트 상자에 이 지우기 버튼을 구현하는 방법은 무엇입니까? 다음 글에서는 텍스트 상자에 지우기 버튼을 설정하는 방법을 소개합니다.

텍스트 상자에 지우기 버튼을 설정하는 방법

먼저 클리어 버튼 설정의 구체적인 예를 살펴보겠습니다

코드는 다음과 같습니다

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"으로 지정되며 텍스트 상자를 촘촘하게 둘러싸는 프레임입니다.

실행 결과

는 브라우저에 다음과 같이 표시됩니다

텍스트 상자에 지우기 버튼을 설정하는 방법