Fix datetime-local input overflow and invisible text on iOS Safari
The native datetime-local picker on iOS Safari has an intrinsic min-width that exceeds the form container, and its webkit pseudo-elements don't inherit the glass text color, making the selected value invisible. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -162,11 +162,32 @@ textarea.form-field {
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
/* iOS Safari: datetime-local overflows container and shows empty when no value */
|
||||
input[type="datetime-local"].form-field {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input[type="datetime-local"].form-field.glass::-webkit-date-and-time-value {
|
||||
color: var(--color-text-on-gradient);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input[type="datetime-local"].form-field.glass::-webkit-datetime-edit {
|
||||
color: var(--color-text-on-gradient);
|
||||
}
|
||||
|
||||
input[type="datetime-local"].form-field.glass::-webkit-datetime-edit-fields-wrapper {
|
||||
color: var(--color-text-on-gradient);
|
||||
}
|
||||
|
||||
/* Form group (label + input) */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
|
||||
Reference in New Issue
Block a user