Давайте начнем с того, что все эти дублирующие правила переопределяют друг друга, и они вам не нужны. Во-вторых, -webkit-autofill поддерживается только НЕКОТОРЫМИ браузерами webkit. Firefox основан на движке рендеринга Mozilla, поэтому он явно не будет работать. Я предполагаю, что Firefox поражает это и игнорирует все остальное.
Гораздо более простое решение для того, что вы хотите, это просто использовать селектор adjacent sybling. АКА Знак Плюс.
.myInputWrap {
margin: 20px;
position: relative;
font-size: 14px;
font-family: sans-serif;
}
input {
padding: 2px;
line-height: 1;
}
label {
position: absolute;
top:0; right:0; bottom:0; left:0;
padding: 2px;
line-height: 1;
pointer-events: none;
transition: transform 0.25s ease-in-out;
}
label span {
background: white;
display:inline-block;
margin-left:2px;
margin-top: 2px;
color: #ddd;
}
input:focus + label,
input:valid + label{
transform: translateY(-10px);
}
<div class="myInputWrap">
<input type="text" required >
<label for="">
<span>Your Name</span>
</label>
</div>
Вам нужно будет поиграть с позиционированием, чтобы метка начиналась и заканчивалась там, где вы хотите. Я добавил span с белым фоном, чтобы казалось, что граница скрыта. Вы можете просто поставить выше и не беспокоиться о поддельной маске над линией.