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 ?
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 baliseest 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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Utilisons (x, x, x, x) pour parler de spécificité
Mar 24, 2025 am 10:37 AM
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
