Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Date input icon is doubled in Firefox #348

Closed
groovenectar opened this issue Apr 11, 2023 · 2 comments · Fixed by #354
Closed

Date input icon is doubled in Firefox #348

groovenectar opened this issue Apr 11, 2023 · 2 comments · Fixed by #354

Comments

@groovenectar
Copy link

Current Behavior

Date picker has two icons:

image

Expected Behavior

One icon on datepicker

Reproduction URL

Example in date input from docs: https://picocss.com/docs/forms.html#range

Environment

Firefox 111.0.1 (64-bit)

@groovenectar
Copy link
Author

The way I'm getting around this (at the moment) is to target Firefox:

@-moz-document url-prefix() {
	[type=date],
	[type=datetime-local],
	[type=month],
	[type=week] {
		background-image: none;
		padding-right: var(--form-element-spacing-horizontal);
	}
}

The padding is overridden because the native icon position is affected by the padding

I don't see where Firefox has an equivalent to -webkit-calendar-picker-indicator but I may be missing something

@lucaslarroche
Copy link
Member

Thank you.
I researched and tested, and your solution seems the best.
I will ship the fix in v.1.5.10

@lucaslarroche lucaslarroche linked a pull request Apr 22, 2023 that will close this issue
@lucaslarroche lucaslarroche mentioned this issue Apr 22, 2023
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 a pull request may close this issue.

2 participants