How To Remove the Arrows on the HTML Input Type Date

How To Remove the Calendar on HTML Input Type Date

This tutorial demonstrates how to remove the calendar on the HTML input type date. Included in this example are usable code and a live demo.

This article was first seen on and republished from csstutorial.io

Remove Arrows on HTML Input Type Date
Remove Arrows on HTML Input Type Date

HTML

To begin with, we need to create a DIV element. Next, we will create a second DIV element as a child of the first. Thirdly, we need to create an HTML input element with the type attribute set to date. Something like this: DIV > DIV > INPUT. The first DIV element will have a class named “super-container” and the second will be “container”. As you see below, the HTML code fits on a few lines.

<div class="super-container">
  <div class="container">
    <input type="date">
  </div>
<div>  

Rendering this HTML will create a generic HTML date picker element like below.

Creating a Generic HTML Date Picker Element
Creating a Generic HTML Date Picker Element

We need to remove the calendar icon from the input element above. Below is an image of the input element with the calendar icon removed. To achieve this effect we need to utilize CSS properties.

Remove Calendar From HTML Date Picker
Remove Calendar From HTML Date Picker

CSS

In this section, we will remove the calendar icon using CSS styles and properties. Additionally, we will be adding some styles to the date input element to spice it up.

Removing the icon is simple, we will use WebKit pseudo-element keywords with the CSS display and WebKit Appearance properties. The CSS pseudo-elements we are using are “-webkit-inner-spin-button” and “-webkit-calender-picker-indicator”. We combine these keywords with the CSS “input[type=”date”] selector which will target the date picker element.

Included within the braces, we use the CSS properties display and “-webkit-appearance”. Both of these properties will have a value set to none.

Below are the full CSS selector and properties to remove the date picker calendar icon.

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

Here are the full CSS stylesheet used in this project.

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.super-container {
  background: linear-gradient(60deg, rgb(39 28 86) 0%, rgb(0 85 96) 100%);
  height: 100%;
  width: 100%;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

input {
  background: linear-gradient(
    60deg,
    rgba(84, 58, 183, 1) 0%,
    rgba(0, 172, 193, 1) 100%
  );
  border-radius: 10px;
  border: none;
  line-height: 80px;
  width: 400px;
  padding: 0 20px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 50%);
  outline: none;
  color: white;
  font-size: 22px;
}

input::placeholder {
  color: white;
}

.container {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
}

Here is a live demo of this example hosted on codepen.io

Recommended Articles