html - 输入框字体大小不起作用。不知道为什么

Question

下面是标记:

<input type="text" id="username" style="
    font-size: 2vw;
    font-family: inherit;
">

和CSS:

#username {
    font-size: 2vw;
}

问题是这行不通。我也尝试过更改字体系列，但这也不起作用。我已经检查了 chrome 中的开发人员工具，没有什么可说的，它被覆盖或任何东西。即使使用样式标签，它也不起作用。如何更改文本框字体的大小和系列？其他网站只是说直接修改属性，我试过了，失败了。

编辑:当我在字段中单击时，字体和字体大小起作用。我希望它们一直工作，而不仅仅是在我点击内部时。没有附加脚本，表单字段只是在表单元素中提交。

编辑:更完整的代码。除了这个我不知道还能展示什么:

<form action="/index.php/component/users/?task=user.login&amp;Itemid=101" method="post" class="form-validate form-horizontal well">
                    <fieldset>


<div class="control-group">
            <div class="control-label">
            <label id="username-lbl" for="username" class="required" data-content="" data-original-title="" title="">
    Username<span class="star">&nbsp;*</span></label>
                    </div>
        <div class="controls">
        <input type="text" name="username" id="username" value="" class="validate-username required" size="25" required="required" aria-required="true" autofocus="" aria-invalid="false">
    </div>
</div>

<div class="control-group">
            <div class="control-label">
            <label id="password-lbl" for="password" class="required" data-content="" data-original-title="" title="">
    Password<span class="star">&nbsp;*</span></label>
                    </div>
        <div class="controls">
        <input type="password" name="password" id="password" value="" class="validate-password required" size="25" maxlength="99" required="required" aria-required="true" aria-invalid="false">    </div>
</div>

                                                                            <div class="control-group remember-group">
                                <div class="control-label">
                                    <label for="remember" data-content="" data-original-title="" title="">
                                        Remember me                                 </label>
                                </div>
                                <div class="controls">
                                    <input id="remember" type="checkbox" name="remember" class="inputbox" value="yes">

                                </div>
                                <div class="control-forgot">
                                    <a href="/index.php/component/users/reset?Itemid=101">
                                        Forgot Password?
                                    </a>
                                    <br>
                                    <a href="/index.php/component/users/remind?Itemid=101">
                                        Forgot Username?
                                    </a>
                                </div>
                            </div>
                                                <div class="control-group">
                            <div class="controls">
                                <button type="submit" class="btn btn-primary">
                                    Log in                              </button>
                            </div>
                        </div>
                                                <input type="hidden" name="return" value="aW5kZXgucGhwP29wdGlvbj1jb21fc3VydmV5JnZpZXc9c3VydmV5aG9tZXBhZ2U=">
                        <input type="hidden" name="d5e9d9bd205a03415af2ff178addfd6f" value="1">                 </fieldset>
                </form>

Answer 1

当我在笔中运行这段代码时，我得到了我对“vw”单位的期望:窗口宽度的 2/100(codepen 的 iframe)。我没有看到你描述的行为，当焦点关闭时，它会缩小。检查您的字体大小是否不在这样的目标上:#username:focus {...}。

使用 vw 设置字体大小是让较大的文本更具响应性的聪明方法。但我喜欢给它添加一个基本尺寸，例如:calc(16px + 1vw)，它可以调节它随着任何特定设备的视口(viewport)增长或缩小的速度。

但是，出于您的目的，使用“vw”可能不是您想要的。我在这里推测，但您正试图使输入文本大于正文字体。最好先设置正文...

body {
  ...
  font-size: 16px; // this defines your "em" size
  ...
}

然后您可以使用它来调整其他尺寸...

h1 {
  font-size: 4em;
}

h2 {
  font-size: 2.5em;
}

#username {
  font-size: 2em;
}

要在不与主体字体大小解耦的情况下返回到原始主体大小，请使用“rem”...

h1 span {
  font-size: 0.8rem;
}

这种方法的美妙之处在于您可以更新一个地方，所有其他引用将自动更新。

比你问的更多的信息，但我希望它能帮助你和其他人。