表单input元素placeholder不显示 求故障排查建议

表单input元素的placeholder完全不显示，已排除浏览器问题（其他页面的placeholder正常显示）。尝试过修改font-family、替换颜色变量为常规亮色、复用其他正常页面代码，均无效。

表单HTML代码 #

<form id="form" action="https://jsonplaceholder.typicode.com/posts" class="contacts__form">
  <input name="Имя" type="text" placeholder="Имя*" data-validate-field="name"
    class="contacts__form-input form-name" autocomplete="off" id="name">
  <input name="tel" type="tel" class="contacts__form-input form-phone" placeholder="Телефон*"
    data-validate-field="tel" data-validate-rules="phone" autocomplete="off" id="tel">
  <button class="btn-reset contacts__form-btn" id="submit-btn">Заказать обратный звонок</button>
</form>

页面头部代码 #

<link rel="shortcut icon" href="img/flavicon.png" type="image/png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/choices.min.css">
<link rel="stylesheet" href="css/accordion.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<script src="js/choices.min.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/scroll.js"></script>
<script src="js/painters-buttons.js"></script>
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<script src="js/inputmask.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU" type="text/javascript"></script>
<script src="js/ymaps.js"></script>

页面底部脚本代码 #

<script src="js/focus-visible.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/slider.js"></script>
<script src="js/select.js"></script>
<script src="js/accordion.min.js"></script>
<script src="js/accordion.js"></script>
<script src="js/validation.js"></script>
<script src="js/validation-rules.js"></script>

关联CSS代码 #

.contacts__form-input {
  width: 270px;
  height: 50px;
  border: 1px solid #333333;
  border-radius: 100px;
}

.form-name, .form-phone {
  margin-right: 20px;
}

::-webkit-input-placeholder {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: var(--dusty-gray-color);
}

::-moz-placeholder {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: var(--dusty-gray-color);
}

:-moz-placeholder {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: var(--dusty-gray-color);
}

:-ms-input-placeholder {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: var(--dusty-gray-color);
}

.contacts__form-btn {
  margin-right: 69px;
  padding: 12.5px 35px;
  padding-right: 36px;
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: var(--amethyst-color);
  border: 2px solid var(--amethyst-color);
  border-radius: 100px;
}

排查方向与解决方案 #

• 变量未定义检查：确认--dusty-gray-color变量是否在CSS的:root或上级选择器中正确声明，变量不存在会导致placeholder颜色失效或透明。
• CSS优先级冲突：排查是否有更具体的选择器（如.contacts__form-input::-webkit-input-placeholder）或!important规则覆盖了当前placeholder样式。
• 内边距与行高调整：input高度为50px，placeholder行高32px，可给.contacts__form-input添加padding: 0 20px;，避免文本被圆角边框裁剪出可视区域。
• JavaScript干扰排查：临时注释validation.js、inputmask.min.js等脚本，检查是否有脚本修改了placeholder属性或自动填充空字符导致文本被隐藏。
• 字体加载验证：替换'Open Sans'为系统字体（如Arial）测试，确认字体未加载失败导致文本不可见。
• 补充标准选择器：添加现代浏览器支持的标准::placeholder选择器，覆盖所有浏览器场景：

::placeholder {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: #999; /* 先用固定颜色测试，再换回变量 */
}

内容的提问来源于stack exchange，提问作者Nevereverstill