Custom Input Date Using HTML and CSS

Hey Guys, In Today’s Blog We are going to see How to create a Custom Input Date Using HTML and CSS. We Completely style Custom Input Date Using Css. For that, the respective source codes were given below along with the respective preview of the output section. So you can make use of that.

first, We create an Input Date in Html and then Give a Custom Style Using Css.

Now The Project is going to create and for that, we are first adding an HTML Code.

HTML Code For Custom Input Date :

<h1>PURE CSS DATE PICKER</h1>
<label for="dateofbirth">Date Of Birth</label>
<input type="date" name="dateofbirth" id="dateofbirth">

First We Create a header using H1 class for the title and add a subheading that has a date of birth using the label class.  Then Lastly we are adding an input class for custom date picking with some Id for reference.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS CODE:

[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* custom styles */
body {
  padding: 4em;
  background: #e5e5e5;
  font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
label {
  display: block;
}
input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
  width: 190px;
}

In First part of CSS , We are adding padding , background and font family inside of body section that contains entire HTML Content. Then The label class is set to block.

In Second Part , We are adding border and its radius , background-color, padding, box-shadow, width to the Input Field element that contains the Custom Date.

50+ Html ,Css & Javascript Projects With Source Code

In Last Part, We are specifically calling the input type and adding background with URL for calendar to display in white background. Then The arrows for selecting future date and past date’s opacity to zero.

Now That’s of for CSS. And Hence We have Successfully completed our Custom Input Date Project by adding the required source codes. So we can now move for project preview in the below Output Section.

Final Output Custom Input Date Using  CSS

Now We have Successfully created our Custom Input Date Using CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Portfolio Website using HTML and CSS (Source Code)

REFER CODE- Mahesh Ambure

WRITTEN BY- Ragunathan