#4365·framework7

iOS: loginScreen form input outline style inconsistency

Author: femto-codeCreated Jan 6, 2026Updated May 19, 2026
  • Framework7 version: 9.0.2
  • Platform and Target: Chrome Browser, PWA/WebApp in iOS style mode

Describe the bug

On login screens, when using form inputs with floating labels and outline style, the floating labels are displayed with a mismatched background color. BUT: this only applies to iOS style in light mode.

To Reproduce

Steps to reproduce the behavior:

  1. Create a login screen
  2. Create form inputs with floating labels (and outline style)
  3. Turn on iOS style
  4. See mismatched floating label background colors

Expected behavior

I expect the floating label to have the same background color as the page, which in this case, is the login screen, so white instead of #efeff4.

Actual Behavior

The background color of the floating label is mismatched as described above.

Screenshots

Image

Additional context

I checked the underlying CSS rules and found the cause:

css
.item-input-outline.item-content .item-floating-label {
    background: var(--f7-page-bg-color); /* #efeff4 */
}

I checked the variable and --f7-page-bg-color resolves to #efeff4 in light mode while the following rule sets the login screen background color to #fff:

css
.login-screen-content, .login-screen-page, .login-screen .page {
    background: var(--f7-login-screen-content-bg-color); /* #fff */
}

That rule defines the login screen background as white (as opposed to a normal page's background color), leading to the mismatch in the floating label CSS rule. This does not happen with MD theme.