失去焦点后搜索栏的字体大小答案

【问题标题】：Font Size of search bar after unfocused失去焦点后搜索栏的字体大小
【发布时间】：2023-02-04 02:26:18
【问题描述】：

我一直在研究这里的搜索栏，我已经尝试过文本大小等。但是，我注意到在输入我喜欢的大小后，输入的文本的字体大小缩小了。我不确定如何让文本保持输入时的大小。

这是我的 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>

这是我的 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;
}

这怎么可能呢？我很坚持这一点。

【问题讨论】：

那么你有一个大尺寸 :focus font-size: 75px; 当它不在焦点 font-size: 20px; 时，它会回到正常尺寸。那么问题是什么？将默认大小设置为 75 而不是 20。
我这里的问题是将用户输入到搜索栏中的文本保持为我设置的字体大小。每当向其中输入文本时，文本都会缩小到默认大小。
所以你将它设置为 75，这样它就不会变成 20。你在 .Search-bar { } 中设置大小
那么如何设置默认大小呢？
那就是我所缺少的！太感谢了！

标签： html css focus font-size searchbar

【解决方案1】：

为什么你有两个不同的尺寸。

.Search-bar {

    font-size: 20px; /* THE SIZE WHEN NOT IN FOCUS */
}
#Search_Bar:focus {


    font-size: 75px; /* THE SIZE WHEN IN FOCUS */
}

所以如果你一直想要大文本，请在课堂上设置大文本。

【讨论】：