Question

我有一个<form>，其中包含几个文本输入字段，如下所示：

<input id="reg" type="text" name="reg" style="width: 200px;" class="eztext">

在<script>之前的</body>部分，我有代码为所有这些字段选择一种字体：

        var el = document.getElementsByClassName("eztext")

        for (var i = 0; i < el.length; i++)
        {
            el[i].style.fontSize = "30px";
            el[i].style.backgroundColor = "#00ff00"; // bright green background as diagnostic
        }

当我第一次在具有已清除缓存的浏览器中运行此程序时，该窗体看起来与预期的完全一样，背景为亮绿色，如果我在框中输入文本，则该窗体将以30px大字体显示...但是，如果我之前使用过几次表格，那么浏览器似乎已经记住了之前的几个条目，即我在表格中已经看到一些以前输入的文本，如果我单击文本字段，则会看到一个列出了各种以前输入的菜单的菜单字符串。

我的问题是背景颜色和字体显然是由其他系统设置的，字体不是30号字体，背景不是绿色。不幸的是，我不知道是什么在控制字体样式。我在文档中找不到关于<input>标签的任何内容。

Answer 1

浏览器为方便起见，会为用户保存以前的输入值。但是，这根本不应该影响元素的样式。

请先检查您没有因某种原因而被覆盖的CSS。

包含和内置CSS的CSS顺序。
!important属性。

您似乎也正在使用不必要的JavaScript来应用您的样式。为什么您按原样使用JavaScript有更深层的含义？您可以使用选择器来简单地使用普通的CSS解决方案。

作为最后的选择，您可以禁用自动完成功能，但这应该是您的最后选择，因为对于用户来说，提高生活质量是可行的。有多种方法可以做到这一点，最简单的方法是：

<input id="reg" type="text" name="reg" style="width: 200px;" class="eztext" autocomplete="off">

或者对于整个表格：

<form autocomplete="off" action="...">

有关禁用输入字段here的更多信息。

如果完全涉及输入字段本身的背景样式，则可以使用-webkit CSS属性来获取所需的样式。

有关here的更多信息。

由@ Ramon de Vries在评论部分提供

如何在表单的文本输入字段中控制字体

1 个答案: