Date Selector Tool for Input Field

Does anyone know how to change the color of the date picker that appears in certain browsers but is unsure about 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"] {
  /*Need help with this section*/
}

Check out the fiddle here:

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

Your assistance is greatly appreciated!

Answer №1

By default, there are only a total of 8 pseudo elements that can be customized 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

Unfortunately, there is currently no universal way to style a native date picker across all browsers.

Answer №2

Your chosen selector is good to go.

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

If your code works on one browser but not on another, consider writing Cross Browser Supported code using prefixes like -webkit-, -moz-, etc.

Alternatively, I recommend using https://jqueryui.com/datepicker/ for enhanced flexibility and additional features.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning child divs using CSS

I am trying to arrange the #inner2 and #inner3 divs to float next to each other while also adjusting to fit perfectly within the #outer div when the browser window size changes. Unfortunately, inner3 is not floating correctly as it should be and is overlap ...

Using CSS3 to style the first letter of a text, align it vertically as super, and adjusting

I am trying to create a basic list without any images included. I would like the first letter of the last item in the list to be styled with "vertical-align: super;", however, this is causing an increase in the height of the paragraph. #third::first-let ...

Tips on personalizing the checkbox by incorporating a custom background image

Looking to spruce up the standard checkbox? We're open to any method - whether it's a background image, CSS3, or some jQuery magic. Check out this example for inspiration! ...

List organized in two columns utilizing the data-* attribute

Is it possible to display a list in a two-column format based on a data attribute of each item? <ul> <li data-list="general_results">general text1</li> <li data-list="general_results">general text2</li> <li dat ...

ScrollSpy Plugin in JQuery - Implementing automatic vertical text scrolling with dynamic height customization

I have been using this code to display the most recent user comments on my website, where some comments are concise while others are more lengthy. If you inspect the source code, you will notice that the height is set to 90px and overflow is set to hidden ...

How to style tables in CSS with specific border spacing inside cells

I've been struggling with this issue for months now and even Google hasn't been able to provide a solution. My problem is that I want to add spacing between <td> and <th> tags in a table, but whenever I do, the spacing appears on the ...

Having a problem with the hover effect on the navbar component

Whenever I hover over the individual links, I notice that the color change doesn't extend all the way up. I have a feeling there is a more efficient way to achieve this than my current approach. Any assistance would be greatly appreciated! HTML: < ...

Utilizing React to Style Background Positions

I've been struggling to position a block of rendered jsx on the right side of the first block for hours now. Despite trying various options like marginTop, marginLeft, and even backgroundPosition based on my research, I still haven't been success ...

Measure with an "em" unit indicated by a dot

Could you clarify if there is a distinction between writing padding:.6em and padding:0.6em; and if they have the same value, why not just use padding:0.6em; ? Thank you ...

Tips for stopping the background color from affecting the text color

I'm dealing with a situation where I have an h6 nested inside a div. <div class="cylinder" data-v-5147e140=""> <div data-v-5147e140=""> <h6 class="quantite" data-v-5147e140="&qu ...

What is the impact of a floated element on vertical spacing?

I have come across an article discussing the usage of CSS, but I am puzzled as to why image number four is not positioned below image number one. Instead, it appears below image number three. Can someone please explain this to me? Here is the HTML code sni ...

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

How can I ensure that HTML5 markup elements such as <header>, <section>, and <footer> are displayed properly in Internet Explorer? I've noticed that when I apply CSS to these elements, the styling doesn't always work as expecte ...

How can I use absolute positioning and scrolling with an Iframe?

One of the key elements of this website is the implementation of iframes, with only one displayed at a time. However, my current issue revolves around the inability to scroll within these iframes due to their absolute positioning. I have attempted variou ...

Problem with structuring a Html5 web page

Recently, I created a web page using HTML5. Check out the code below: <header> <img src="img/logo.png" alt="logo"> <hr class="hr-style"> <h1>The Articles</h1> <nav> <ul> <li><a href="#" ...

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

As a React beginner, I am facing issues with getting my CSS to work properly in my project. I know that CSS is not used directly in React, but rather interpreted as JavaScript using webpack and babel. What have I tried? I attempted to make changes to my w ...

Tips for incorporating a smooth fade in and out effect into images within a Bootstrap 5 carousel

I'm currently working with a Bootstrap 5 carousel and trying to implement a transition effect where clicking the "next" arrow will smoothly fade out the current image before fading in the next one. This is necessary because the images in my carousel v ...

What is the best way to have react-bootstrap's Dropdown automatically open when hovering your mouse over it?

Looking for a simple solution. I want the dropdown to open when hovering over it, rather than clicking on it. Here is my current code: <Nav> <NavDropdown onMouseEnter = {()=> isOpen=true} open={isOpen} noCare ...

Tips for creating space between a label and radio button in Bootstrap 4

I attempted to use this solution as suggested, but unfortunately, it did not yield the desired results. I seek advice on how to achieve the intended outcome. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="s ...

The sidebar is not correctly displaying at full height

Having trouble getting the sidebar to fit perfectly between the header/nav and footer in full height. <html> <head> <meta charset="utf-8"> </head> <body> <header> <div class="header"> & ...

JavaScript has encountered a syntax error

When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...