So legen Sie die Schaltfläche „Löschen' im Textfeld fest-CSS-Tutorial-php.cn

So legen Sie die Schaltfläche „Löschen' im Textfeld fest

不言

Freigeben： 2018-12-04 17:05:54

Original

5682 Leute haben es durchsucht

Manchmal sehen wir einen Kreis mit einem × darin auf der rechten Seite des Textfelds. Dies ist eigentlich die Schaltfläche „Löschen“ im Textfeld. Im nächsten Artikel erfahren Sie, wie Sie in einem Textfeld eine Schaltfläche zum Löschen festlegen.

So legen Sie die Schaltfläche „Löschen im Textfeld fest

Sehen wir uns zunächst ein konkretes Beispiel für die Einstellung der Löschtaste an

Der Code lautet wie folgt

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>

Nach dem Login kopieren

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;  
}

Nach dem Login kopieren

Anleitung

Bereiten Sie im obigen Code einen „searchFrame“-Rahmen um den vor Textfeld. Platzieren Sie die Schaltfläche „Löschen“ am rechten Ende des „searchFrame“-Rahmens. Platzieren Sie es am rechten Ende des Stylesheets, indem Sie die richtigen Eigenschaften festlegen. Der Rahmen „searchFrame“ wird als „display:inline-block“ angegeben und ist ein Rahmen, der das Textfeld eng umschließt.

Das laufende Ergebnis

zeigt den folgenden Effekt im Browser an

So legen Sie die Schaltfläche „Löschen im Textfeld fest

Sie können es wie folgt verwenden Normales Textfeld Geben Sie Buchstaben ein. Wenn Sie den Mauszeiger auf das Symbol [×] ganz rechts bewegen, ändert sich die Form des Zeigers. Durch Klicken wird der Inhalt des Textfelds wie folgt gelöscht:

So legen Sie die Schaltfläche „Löschen im Textfeld fest

Dieser Artikel endet hier. Weitere verwandte spannende Inhalte finden Sie in der Spalte CSS-Video-Tutorial auf der chinesischen PHP-Website weiter studieren! ! !

Das obige ist der detaillierte Inhalt vonSo legen Sie die Schaltfläche „Löschen' im Textfeld fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!