I have two input date attributes. I want to set the space between the text and the icon to 0.

My problem is that my CSS code (styled component) works for the first attribute but not for the second (see picture).

It is quite weird because if change the value of margin-left from 0px to 20px, the gap is modified for the two attributes but the space in the second attribute remains larger.

Here are my components :

<StyledFromToFrame >

  <StyledDateInput type="date" value={formatDate(firstDate)} defaultValue={formatDate(firstDate)} max={formatDate(secondDate)} onChange={(event) => { modifyFirstDate(event) }} />


  <StyledDateInput type="date" value={formatDate(secondDate)} defaultValue={formatDate(secondDate)} min={formatDate(firstDate)} onChange={(event) => { modifySecondDate(event) }} />

</StyledFromToFrame>

and my css looks like :

const StyledDateInput = styled.input.attrs({type: 'date'})`

    background: none;

    padding: 0px 0px 0px 0px;

    //border: none;
    font-family: ${Fonts.fontFamily};
    font-weight: lighter; 
    font-size: 18px;

    &::-webkit-calendar-picker-indicator{
        margin-left: 0px;
    };

`

The answers from this question do not seem to work : HTML input date, how to decrease space between date and icon?

Thanks a lot !

I would like that the gap between the text and the icon would be the same for the two attributes.