CODEWITHSUNDEEP
css
froggomad
froggomad

Reputation: 1915

Date Picker Selector for Input Field

I'm trying to change the color of the date picker that shows in some browsers but don't know the selector's name.

HTML:

<form action="pledge.html" method="post">       
    <input type="date" id="birthday" name="user_bday">
</form>

CSS:

body {
    background-color: black;
}

input {
    height: 45px;
    width: 40%;
    border-width: 3px;
    border-style: solid;
    border-color: white;
    border-radius: 90px;
    margin: 10px;
    text-align: center;
    font-size: 24px;
    color: white;
    font-weight: bold;
    background-color: transparent;
    outline: none;
}

input[type="date"] {
  /*Something Goes Here Probably*/
}

Here's a fiddle

https://jsfiddle.net/froggomad/gznx60j1/25/

Thanks!

Upvotes: 1

Views: 1462

Answers (2)

Delowar Hossain
Delowar Hossain

Reputation: 385

your selector is okay.

input[type="date"] {
   /*CSS Rules*/
}

If your codes run on one browser and don't run on another browser, then you need to write Cross Browser Supported Codes with the prefix such as -webkit- , -moz- etc.

But, I will suggest you to use https://jqueryui.com/datepicker/ for flexibility and more features.

Upvotes: 0

Vishnudev Krishnadas
Vishnudev Krishnadas

Reputation: 10960

There are only 8 pseudo elements that are available for customization by default using webkit

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

and sadly, there is no cross browser way of styling a native date picker.

Upvotes: 2

Related Questions