La tarea es crear un cuadro de búsqueda animado utilizando HTML y CSS. La barra de búsqueda es uno de los componentes más importantes del sitio web. Básicamente, se utiliza para conectar personas con sitios web. Ante contenidos web complicados, los usuarios expresan sus necesidades buscando palabras clave, esperando obtener información precisa y resultado rápido.
Acercarse:
Paso 1: aquí usamos un elemento de entrada en la sección HTML.
<input type="text" name="search"
placeholder="Search anything here ..">
Paso 2: agregue código CSS para hacerlo atractivo.
input[type=text] {
width: 150px;
box-sizing: border-box;
border: 4px solid green
border-radius: 6px;
font-size: 26px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.3s ease-in-out;
}
input[type=text]:hover {
width: 90%;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
input[type=text] {
width: 150px;
box-sizing: border-box;
border: 4px solid green;
border-radius: 6px;
font-size: 26px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.3s ease-in-out;
}
input[type=text]:hover {
width: 90%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
Create an Animated Search
Box using HTML and CSS
</h2>
<form>
<input type="text" name="search"
placeholder="Search..">
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA