Skip to content

Instantly share code, notes, and snippets.

@mohammad-ahid

mohammad-ahid/style.css

Created January 16, 2017 14:46
Show Gist options
  • Save mohammad-ahid/52b147cb05d85f0f5ba6f93ef497930a to your computer and use it in GitHub Desktop.
Save mohammad-ahid/52b147cb05d85f0f5ba6f93ef497930a to your computer and use it in GitHub Desktop.
Download ZIP
CSS hack to hide Chrome default date picker styles
Raw
style.css
// @see http://stackoverflow.com/questions/11320615/disable-browser-native-datepicker
input::-webkit-calendar-picker-indicator{
display: none;
}
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}
@akwotom
Copy link

akwotom commented Oct 21, 2021

Genial !

@JeffersonFerreira
Copy link

Awesome, thanks :D

@canerucal
Copy link

Did not work for me, using Firefox 97.0.1

@JeffersonFerreira
Copy link

Did not work for me, using Firefox 97.0.1

Yeah, this little hack only works for Chrome.

You can have a similar result on Firefox by adding the required attribute in your input

@dimitur2204
Copy link

dimitur2204 commented Mar 11, 2022 •
edited
Loading

@JeffersonFerreira
Can you explain how I can hide it in Firefox, because I can't make it work with the required as you explained. I have it like that right now

It also doesn't work in Safari too

image

Firefox version: 97.0.2 (64-bit)

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