Skip to content

fixed the icons to the center - #4

Open
alihaiderengineer wants to merge 1 commit into
mozilla:mainfrom
alihaiderengineer:center-checkbox-icons
Open

fixed the icons to the center#4
alihaiderengineer wants to merge 1 commit into
mozilla:mainfrom
alihaiderengineer:center-checkbox-icons

Conversation

@alihaiderengineer

Copy link
Copy Markdown

Closes #3

Description

The checkmark icons inside checkboxes were not properly centered across different browsers because of the hardcoded top: 0; left: 3px; positioning.

Solution

  • Added display: inline-flex, align-items: center, and justify-content: center to .toggle input[type="checkbox"].
  • Removed absolute positioning from .toggle input[type="checkbox"]:checked::after to let flexbox center the custom icon naturally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI Bug]: Checkbox click icons are not properly centered

1 participant