Login border focus not the same with border field

Store Design
, , ,

Topic summary

A user encountered a CSS styling issue on their login page where the border focus state didn’t match the length of the input field border.

Problem Details:

  • The focused input border appeared misaligned or different in size compared to the default field border
  • Screenshots were provided showing the visual discrepancy

Solution Provided:

  • Custom CSS code was added to the base.css file targeting .customer .field elements
  • Initial fix adjusted padding and positioning but created unwanted spacing between border and text
  • Code was refined to properly align the focus border while maintaining appropriate text spacing
  • Final CSS included padding-left adjustments for both the field and label elements with !important flags

Outcome:

  • Issue was successfully resolved after the code update
  • User confirmed the fix worked as intended
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
2

Hi @sweetchin23

Could you share your store link please?