the input box is using focus already,input and label tags are not using the css style provided earlier in style tag? transform not working :( i have bold where i am not getting, i have provided my css and html i used input and label> then style them in css but it doesnot work then I created transition and it does not work more over it took it as default in page
Code I tried-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search</title>
</head>
<style>
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus,
.search:valid {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
#searchbar:focus~label,
#searchbar:valid~label {
transform: translatey(-10px);
}
</style>
<body>
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search"><label for="searchbar">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire