Search Icon and Select
<!DOCTYPE html>
<html>
<head>
<!--You cant do the transtion of linear gradient as it is a background-image,so we use background-position to make effects-->
<style type="text/css">
body{
position: sticky; /*Without this we would not be able to use input box,becausebody covers the input box*/
transition:background-position 1.5s ease-in;
height:100vh;
width:100vw;
background-size:400%;
background-image:linear-gradient(to right,red,orange,powderblue,purple,coral);
background-position:right; /*Do not use top or bottom for background-position,it is not working.*/
}
body:hover{
background-position:left;
}
input{
z-index:-1;
position: absolute;
left:80px;
border-radius: 1cm;
width:10px;
transition: width 0.5s ease;
}
button{
position: absolute;
left:40px;
transition:transform 0.5s ease;
}
button:focus{
display:block;
transform:translateX(230px);
}
button:focus~input,input:focus{
width:200px;
left:100px;
}
input::placeholder{
font-weight:bold;
}
select{
font-size:2vw;
font-weight:bold;
position:absolute;
top:200px;
width:20vw;
background-image:linear-gradient(to right,skyblue,hotpink);
border-radius:1cm;
}
select:focus{
border:0.2em solid black;
}
option{
font-size:2vw;
font-weight:bold;
color:teal;
}
</style>
<title></title>
</head>
<body>
<div>
<button>Search</button>
<input type="search" name="search" list="army" placeholder="CHOOSE COUNTRY"></div>
<datalist id="army">
<option value="INDIA">
<option value="AMERICA">
<option value="RUSSIA">
</datalist>
<!--This is how to use select-->
<select>
<option selected disabled>CHOOSE</option>
<option value="INDIA">INDIA</option>
<option value="US">US</option>
<option value="CANADA">CANADA </option>
</select>
<script type="text/javascript">
var input=document.getElementsByTagName("input");
var i=0;
let change=()=>{
if (i==0){
input[0].style.backgroundImage="linear-gradient(to right,#ff6e7f,#bfe9ff)";
i++;
}
else if(i=!0){
input[0].style.backgroundImage="linear-gradient(to right,#ec008c,#fc6767)";
i=0;
}
}
setInterval(change,1000);
</script>
</body>
</html>
Comments
Post a Comment