Por favor, ¿cómo puede hacer un cuadro de búsqueda que al hacer clic en el icono de búsqueda abra otra página para el cuadro de búsqueda en la barra de búsqueda de Facebook? Gracias por adelantado.
Traté de crearlo usando HTML y CSS solamente
body { margin: 0; } nav { background-color: rgba(0, 0, 255, 0.172); border-bottom: 1px solid blue; padding: 0.5em 0; display: grid; place-items: center; } nav input[type="text"] { font-size: 1.5em; border-radius: 2em; border: none; color: white; width: 1.5em; transition-duration: 0.5s; } nav input[type="text"]:hover, nav input[type="text"]:focus { width: calc(90vw - 2em); color: rgb(0, 51, 255); border-radius: 0.2em; transition-duration: 1s; padding: 0 2em 0 0; } input[type="text"]:hover~svg, input[type="text"]:focus~svg { right: 10px; } nav #content { display: grid; grid-auto-flow: column; place-items: center; } #content svg { width: 1.5em; height: 100%; position: absolute; pointer-events: none; top: 0; z-index: 1; } #content { position: relative; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <div id="content"> <input type="text"> <!--search icon--> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" focusable="false" class="style-scope yt-icon"><g class="style-scope yt-icon"><path d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z" class="style-scope yt-icon"></path></g></svg> </div> </nav> </body> </html>