Comment définir le bouton Effacer dans la zone de texte-tutoriel CSS-php.cn

Comment définir le bouton Effacer dans la zone de texte

不言

Libérer： 2018-12-04 17:05:54

original

5651 Les gens l'ont consulté

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.

Comment définir le bouton Effacer dans la 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>

Copier après la connexion

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

Copier après la connexion

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

Comment définir le bouton Effacer dans la zone de texte

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

. Comment définir le bouton Effacer dans la zone de texte

Comment définir le bouton Effacer dans la zone de texte

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!