ARTICLE AD BOX
Problem:
I have an
<input type="date"/>
element, and it looks like this:
normal date selector
as you see there is a "calendar" icon which can be used to select a date.
but when i disable the date field with:
<input type="date" disabled/>
it looks like this:
blank space instead of calendar icon
as you see, the "calendar" icon is gone, but there is a blank space where it used to be, I think that the blank space looks kind of bad and would like to remove it.
What I tried:
I attempted to force the input to be smaller, with
<input type="date" disabled style="width:90px"/>
but that starts to look really weird because the invisible calendar icon covers up the mm/dd/yyyy text as you can see below.
mm/dd/yyyy is covered up partially
another thing I thought about was to have a container element that has overflow=hidden to "clip" off the blank space, but that would mess up the input's border which would complicate things with selected and unselected states.
Question:
Is there a clean and good-practice way that I can make the input element be just as wide as the mm/dd/yyyy text when disabled without the calendar icon covering up the text?
