“No file selected” text cut off on mobile

[cmdecker95]

I was browsing the Tailwind Forms live demo today (Oct 14, 2023) from my iPhone 14 Pro Max on Safari on iOS17.

I noticed that the “No file selected” label for the file input elements was truncated, like so:

Maybe it would be better to shift the label under the input?

[cmdecker95]

I realize now that the “no file selected” text is default browser behavior. Maybe add this bit around lines 305-324 to not display placeholder text for file input elements.

{
  base: [`[type='file']`],
  class: null,
  styles: {
    background: 'unset',
    'border-color': 'inherit',
    'border-width': '0',
    'border-radius': '0',
    padding: '0',
    'font-size': 'unset',
    'line-height': 'inherit',
  },

  // Add this
  placeholderStyles: {
    '[type="file"]::placeholder': {
      visibility: 'hidden',
      display: 'none', // If visibility alone doesn't work
    },
  },
}