Как стилизовать значок календаря при вводе даты? ⇐ Html

[Anonymous]

У меня есть ввод [type = date] < /p>

Check in


Check out


< /code>
.input{
float: right;
height: 1.8vw;
width: 10vw;
border: 1px solid #FCA311;
border-radius: 5px;
background-color: black;
color: white;
text-align: center;
}
< /code>
due to this the calendar icon is not visible, how should i style the icon. I want the icon to be yellow color to match the theme
I tried using :before pseudo element , but it didn't do anything
I want the code to support every browser
input[type=date]:before {
content: '\1F4C5';
font-family: Arial, sans-serif;
font-size: 16px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}


Подробнее здесь: https://stackoverflow.com/questions/768 ... date-input