1

I have this problem:
enter image description here
I want the calendar icon to render a little smaller, inside the input and equidistant from the three borders.
I could achieve it by reducing the icon's padding and also its size, using CSS.
The problem is that I have no idea on how to target it.

This is the DateInput control by @atanasster for Grommet 2, the UI framework by HP.
It looks like this because I changed its size, my version is shallower than the original.

As these are styled-components I think there might be a way to style them, but I don't know how to target the component's children, its internal HTML nodes.

Repeatedly reading the docs for hours didn't help.
I'd appreciate very much some wisdom on styling, or the confirmation that what I want to do is not possible.

The example can be seen here: https://stackblitz.com/edit/dateinputstyled

Juan Lanus
  • 2,293
  • 23
  • 18

0 Answers0