Issue
Please how can make a search box that on click on the search icon should open another page for the search box Facebook search bar. Thanks in advance.
Solution
I tried to create it using HTML and CSS only
here the result:
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>Answered By - Laaouatni Anas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.