Estoy tratando con un input date y por un caso muy especifico me pidieron que solo muestre el dia y el mes para dejar espacio para un icono svg
Algo como lo mostrado en la imagen, el caso es que aunque intente cubrirlo ajustando el tamaño de la fuente mediante CSS de la siguiente manera:
.suba.second {
display: flex;
padding: 0.3vw 0.1vw;
align-items: center;
justify-content: center;
}
.second input[type="date"]{
padding: 1vw 0;
font-size: .94vw;
height: 1vw;
}
.second input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
margin-left: -0.7vw;
width:5vw;
background: transparent;
cursor: pointer;
}
.suba.second svg{
margin-left: 3.5vw;
position: absolute;
width: 1vw;
margin-left: 1.7vw;
background-color: #ffffff;
pointer-events: none;
}
Y en HTML
<div class="suba second">
<input type="date">
<svg xmlns="http://www.w3.org/2000/svg" width="16.297" height="16.297" viewBox="0 0 16.297 16.297">
<path id="Icon_awesome-chevron-circle-down" data-name="Icon awesome-chevron-circle-down" d="M16.86,8.711A8.149,8.149,0,1,1,8.711.563,8.147,8.147,0,0,1,16.86,8.711ZM9.27,12.454,13.722,8a.785.785,0,0,0,0-1.114l-.559-.559a.785.785,0,0,0-1.114,0L8.711,9.667,5.373,6.329a.785.785,0,0,0-1.114,0L3.7,6.888A.785.785,0,0,0,3.7,8l4.452,4.452A.789.789,0,0,0,9.27,12.454Z" transform="translate(-0.563 16.86) rotate(-90)" fill="#cacdd5"/>
</svg>
</div>
Pero no logra cubrir exitosamente el año, por lo que me pregunto si se podria evitar mostrar en el display quedando en formato mostrado solo "dd/mm"