Custom input date in html page

Question

I have a date field in my html page :

<input type="date"   id="birth_date" name="birth_date" placeholder="dd/mm/yyyy"   />

When I launch my application I got this result :

this

I need to know How can I hide these controls ( right of the image) using the simplest way ?

Thanks,

Check -webkit-appearance property, css-tricks.com/almanac/properties/a/appearance — C3roe
– C3roe, Commented Jun 13, 2015 at 18:12

light · Accepted Answer · 2015-06-14 13:29:21Z

3

If I understand correctly, there are 4 things you want to remove for input[type=date] on a webkit browser:

Blue cross
Up arrow button
Down arrow button
Datepicker dropdown button (opens up datepicker)

This CSS rule will hide them all:

input[type=date]::-webkit-clear-button, /* blue cross */
input[type=date]::-webkit-inner-spin-button, /* up */
input[type=date]::-webkit-outer-spin-button, /* down */
input[type=date]::-webkit-calendar-picker-indicator /* datepicker*/ {
    display: none;
}

answered Jun 14, 2015 at 13:29

light

4,3173 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Sadh · Accepted Answer · 2015-06-13 18:27:57Z

0

You can do it like this:

input::-webkit-clear-button { 
  -webkit-appearance: none;
  margin: 0;
}

JS FIDDLE DEMO

edited Jun 13, 2015 at 18:27

answered Jun 13, 2015 at 18:13

Vivek Sadh

4,2683 gold badges35 silver badges55 bronze badges

4 Comments

Lamloumi Afif Over a year ago

No change, I got no change

Vivek Sadh Over a year ago

It should work. You can check the JSFIDDLE demo I posted now.

Lamloumi Afif Over a year ago

I got different result when I change the browser. even using your demo

Vivek Sadh Over a year ago

Maybe you should try -moz-appearance in case you are using firefox.

Collectives™ on Stack Overflow

Custom input date in html page

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related