Font Size of search bar after unfocused-CodePudding

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()" >
        </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.

CodePudding user response：

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.