Maison >interface Web >tutoriel CSS >Comment mettre en surbrillance une barre de recherche Google (comme une zone de saisie) au survol à l'aide de CSS ?

Comment mettre en surbrillance une barre de recherche Google (comme une zone de saisie) au survol à l'aide de CSS ?

WBOYavant: 2023-09-14 23:17:02977parcourir

如何使用 CSS 使 Google 搜索栏（如输入框）在悬停时突出显示？

La barre de recherche est un élément souvent négligé du processus de conception de sites Web, même si les consommateurs s'en servent pour accéder à des informations uniques. La barre de recherche étant l’une des parties les plus couramment utilisées d’un site Web, sa conception a un impact considérable sur l’expérience utilisateur.

La barre de recherche est utile pour les sites Web comportant plus de 100 pages de contenu complexe. Les barres de recherche sont utilisées pour aider les clients à trouver des informations sur les grands sites de commerce électronique, les sites d'actualités, les sites d'offres et les sites de réservation dans l'espace business-to-consumer (B2C). Ils sont également employés par de grands sites B2B avec plusieurs segments de clientèle et gammes de produits. Pour un petit site Web avec peu de pages, la barre de recherche n’est peut-être pas nécessaire, mais à mesure que le site Web se développe, la barre de recherche deviendra essentielle.

La barre de recherche se compose essentiellement de deux éléments d'interface utilisateur : un champ de saisie et un bouton. Dans cet article, nous verrons comment créer une surbrillance de zone de saisie similaire à la barre de recherche Google à l'aide des propriétés CSS.

Barre de recherche Google

La barre de recherche est un emplacement dans n'importe quel navigateur Internet qui permet aux utilisateurs de rechercher les informations requises sur Internet. Il permet également aux lecteurs de rechercher le site Web tout en le parcourant. De même, les utilisateurs peuvent effectuer n'importe quel type de recherche depuis l'écran d'accueil en utilisant la barre de recherche Google (un widget de recherche lié à l'application Google).

Boîte de saisie

La balise

est un élément HTML utilisé pour créer des formulaires Web interactifs permettant aux utilisateurs de soumettre des données. Il existe différents types de données d'entrée en fonction du type d'appareil et de l'utilisateur. L'élément est l'un des éléments les plus populaires et les plus couramment utilisés en HTML en raison de ses différents types de données d'entrée et de ses attributs.

Voici sa syntaxe -

<input type= "value" id= "demo" name= "demo">

REMARQUE - Utilisez la balise pour définir les éléments de l'élément . L'attribut for de l'élément doit être le même que l'identifiant de l'élément .

Propriétés de survol CSS

:hover est une pseudo-classe CSS qui permet à l'utilisateur de savoir qu'un dispositif de pointage a été cliqué ou déplacé sur cet élément spécifique. Par exemple, si vous survolez un élément de la page, sa couleur de police ou sa couleur d'arrière-plan peut changer en fonction des propriétés CSS spécifiées.

Exemple

Découvrez les exemples ci-dessous -

<!DOCTYPE html>
<html>
<head>
   <title> CSS buttons </title>
   <style>
      button{
         margin: 10px 5px 10px 10px;
         padding: 5px;
         color: blue;
      }
      button:hover{
         color: red;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h1> Hovering on a Button </h1>
   <button> Click Me! </button>
</body>
</html>

Après avoir survolé l'élément Button, la couleur du texte à l'intérieur passera du bleu au rouge. De plus, la taille de la police du texte augmentera.

Propriétés de l'ombre de la boîte

La propriété

box-shadow permet aux développeurs d'appliquer une ou plusieurs ombres à un élément. Attribuez plusieurs effets simplement séparés par des virgules.

Exemple

<!DOCTYPE html>
<html>
<head>
   <style>
      #demo {
         border: 5px solid;
         padding: 10px 15px;
         box-shadow: -5px -10px 0px 5px grey;
      }
   </style>
</head>
<body>
   <h1> The box-shadow property</h1>
   <article id="demo"></article>
</body>
</html>

Créer une mise en surbrillance de la zone de saisie

Pour créer une zone de saisie comme la barre de recherche Google, nous devons suivre les étapes suivantes -

Créez un champ de saisie avec type="text".
Ajustez sa hauteur et sa largeur à l'aide de CSS. Utilisez la propriété box-shadow pour fournir un effet d'ombre au champ de saisie.
Pour la rendre similaire à la barre de recherche Google, un effet d'ombre doit être affiché au survol, nous utiliserons donc les propriétés de survol CSS.

Exemple

<!DOCTYPE html>
<html>
<head>
   <title> Input search box </title>
   <style>
      body{
         background-color: cyan;
      }
      h1{
         color: #00F00;
         text-decoration: underline;
      }
      #search-box{
         width: 350px;
         height: 20px;
         border-radius: 21px;
         text-align: center;
         border: 1px solid #EDEADE;
         outline: none;
         display: block;
      }
      #search-box:hover{
         box-shadow: 4px 4px 4px grey;
         cursor: pointer;
      }
      input:hover {
         box-shadow: 0px 1px 3px rgb(192, 185, 185);
      }
      button{
         padding: 2px 7px;
         border-radius: 3px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <center>
      <div class= "box">
      <h1> Tutorialspoint </h1>
      <input type= "text" id= "search-box"> <br> <br>
      <button> Search </button>
   </center>
</body>
</html>

Conclusion

Dans cet article, nous avons expliqué comment créer une zone de saisie similaire à la barre de recherche Google qui se met en surbrillance au survol.

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!

css html 数据类型 for 伪类 ui

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：A quoi sert la fonction SASS @import ?Article suivant：A quoi sert la fonction SASS @import ?

Articles Liés

Voir plus