Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Schaltfläche „Löschen' im Textfeld fest
So legen Sie die Schaltfläche „Löschen' im Textfeld fest
- 不言Original
- 2018-12-04 16:57:525679Durchsuche
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.
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>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;
}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
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:
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!