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;
|
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 (label + input) */
|
||||||
.form-group {
|
.form-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.35rem;
|
gap: 0.35rem;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
|
|||||||
Reference in New Issue
Block a user