Placeholder is not seen in input - placeholder

Question

Here is the part of my code in which I have problems. I can't understand why the Placeholders are not seen. It's not the problem of the browser (I open another HTML here and placeholders work). Please, hint what can be wrong.
<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>
Head:
<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>
scripts at the end of the body:
<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;
}
I tried to change font-family, changed var to normal bright color, and even inserted the code from another HTML, where the placeholders are seen. Nothing works.

Answer 1

The problem turned out to be simple. I have already used placeholder for the a search input above in the code. This link helped Multiple styles for input placeholder text
All is solved.