I have been working on a search bar here that I’ve played around with the text sizes and such. However, I have noticed that the font size of the text typed in shrunk down in size after being typed in the size that I prefered. I’m not exactly sure how to have the text stay the size it was typed in as.
Here’s my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section style="background-color: lightgrey;">
<input type="text" placeholder="Search Fennec Tech..." id="Search_Bar" onclick="Search()" class="Search-bar">
</section>
</body>
</html>
Here’s my CSS:
*
section {
place-content: center;
scroll-snap-align: start;
block-size: 100vh;
padding: 100px;
font-family: sans-serif;
font-size: 50px;
}
#Search_Bar {
background-color: transparent;
border: none;
border-left: solid 5px blue;
border-bottom: solid 5px blue;
color: blue;
}
.Search-bar {
height: 200px;
width: 1250px;
font-size: 20px;
placeholder-text-color: red;
}
#Search_Bar:focus {
animation-name: Search-anim;
animation-duration: 2s;
font-size: 75px;
}
@keyframes Search-anim {
from {
background-color: transparent;
color: green;
}
to {
background-color: white;
color: blue;
}
}
::placeholder {
color: red;
font-size: 75px;
opacity: 0.5;
}
How is it possible to do this? I’m quite stuck on this.
>Solution :
Why you have two different sizes.
.Search-bar {
font-size: 20px; /* THE SIZE WHEN NOT IN FOCUS */
}
#Search_Bar:focus {
font-size: 75px; /* THE SIZE WHEN IN FOCUS */
}
So it you want big text all the time set the big text on the class.