Maison > Article > interface Web > Comment définir le bouton Effacer dans la zone de texte
Comment définir le bouton Effacer dans la zone de texte
- 不言original
- 2018-12-04 16:57:525646parcourir
Parfois, nous verrons un cercle avec un × sur le côté droit de la zone de texte. Alors, comment implémenter ce bouton d'effacement dans la zone de texte ? Le prochain article vous expliquera comment définir un bouton d'effacement dans une zone de texte.
Regardons d'abord un exemple spécifique de définition du bouton d'effacement
Le code est le suivant
Code HTML
<!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>Code CSS
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
Dans le code ci-dessus, préparez un "searchFrame " autour du cadre de la zone de texte. Placez le bouton d'effacement à l'extrémité droite du cadre "searchFrame". Placez-le à l'extrémité droite de la feuille de style en définissant les propriétés correctes. Le cadre « searchFrame » est spécifié comme « display:inline-block » et est un cadre qui entoure étroitement la zone de texte.
Le résultat de l'exécution
affichera l'effet suivant sur le navigateur
Vous pouvez l'utiliser comme un zone de texte normale Entrez des lettres. Si vous déplacez le pointeur de la souris vers l'icône [×] à l'extrême droite, la forme du pointeur changera. À ce moment, cliquer supprimera le contenu de la zone de texte. L'effet est le suivant
. 
Cet article se termine ici Pour plus de contenu passionnant, vous pouvez accéder à la colonne Tutoriel vidéo CSS sur le site Web chinois php pour. étude plus approfondie ! ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!