Since these were taken from Flowbite to start, there are several issues. The ::file-selector-button was offset and wasn't rendered correctly. The offset was to add spacing between the button and generated browser text that we can't style. It would be preferred as a default to not offset. This applies same styles as other input controls to keep it simple and consistent. The :focus style was removed since it was invalid anyway and not applied by the browser.

This was partially addressed in #8574 but not targeting the right element. This approach is preferred to simplify the styles as the fix in #8574 (display block and overflow hidden) are unnecessary and cause undesired effects e.g. no border radius visible on left side of button.

This now uses a single text-gray-500 for both light and dark modes using the correct Tailwind syntax.

Originally, this required different background sizes due to the checkbox SVG but all 3 SVGs now account for being within a padded square box so we can now set a single background size of 100% for both elements. The checkbox SVGs had to be recreated for that. This also removes a duplicate rule (.dark [type='radio']:checked) because of CSS specificity which we no longer need.

For an attribute with multi line text (e.g. comment body), we want the column header to align to the top or specifically the baseline of the parent. This way the column text aligns nicely with the value text.

The attributes table heading dark mode color was too bright so this darkens it and is a nice contrast to mimic what its like in light mode. The empty value text is lighter now in dark mode too since it wasn't as visible.

This also updates the inline-errors to include the select element.

The SVG's use currentColor so it applies the (text) color of the parent element. We can further control this and for dark mode to make these nicer and standout.