Firefox email input fix

This commit is contained in:
David Hill
2025-10-02 23:50:51 +01:00
parent 4c11ccd334
commit ea993976b0
2 changed files with 37 additions and 6 deletions

View File

@@ -797,15 +797,29 @@ body {
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--color-border-weak); border: 1px solid var(--color-border-weak);
padding: 20px; padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%; width: 100%;
/* Use color, not -moz-text-fill-color, for normal text */
color: var(--color-text-strong);
@media (max-width: 30rem) { @media (max-width: 30rem) {
padding-bottom: 80px; padding-bottom: 80px;
} }
&:not(:focus) {
color: var(--color-text-strong);
}
&::placeholder {
color: var(--color-text-weak);
opacity: 1;
}
/* Optional legacy */
&::-moz-placeholder {
color: var(--color-text-weak);
opacity: 1;
}
} }
input:focus { input:focus {

View File

@@ -113,6 +113,8 @@ body {
} }
[data-component="container"] { [data-component="container"] {
max-width: 67.5rem; max-width: 67.5rem;
margin: 0 auto; margin: 0 auto;
@@ -516,14 +518,29 @@ body {
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--color-border-weak); border: 1px solid var(--color-border-weak);
padding: 20px; padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%; width: 100%;
/* Use color, not -moz-text-fill-color, for normal text */
color: var(--color-text-strong);
@media (max-width: 30rem) { @media (max-width: 30rem) {
padding-bottom: 80px; padding-bottom: 80px;
} }
&:not(:focus) {
color: var(--color-text-strong);
}
&::placeholder {
color: var(--color-text-weak);
opacity: 1;
}
/* Optional legacy */
&::-moz-placeholder {
color: var(--color-text-weak);
opacity: 1;
}
} }
input:focus { input:focus {