Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

Question

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward.

<input type="date />

When viewed on Firefox (both desktop and mobile), it appears as follows:

https://i.stack.imgur.com/S2i0s.png

While the internet provides a solution specifically for Chrome:

input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

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

This method does effectively conceal the calendar icon in Chrome, but proves unsuccessful on Firefox. Despite various attempts, I have yet to find a workaround that works on Firefox. The question remains whether such a solution is feasible. My goal is to hide the calendar icon. I understand that on desktop, clicking the calendar icon is necessary to access the date picker. However, this is not an issue for my mobile application.

html css

Answer 1

Answer №1

If you're looking for a way to enhance your date picker, one interesting approach is to overlay a text input box on top of the date picker. Then, using the showPicker() method, you can trigger the date picker dialog box. By listening to the change event, you can update the text input with any changes made in the date picker. To improve the formatting of the date, consider leveraging the Intl.DateTimeFormat object for locale-specific settings.

Keep in mind that this solution may not work on platforms like CodePen or snippet editors due to security restrictions. You might need to test it on localhost or within your development environment instead.

const textInput = document.querySelector('.datepicker input[type="text"]');
const dateInput = document.querySelector('.datepicker input[type="date"]');
textInput.addEventListener('focus', (e) => {
  dateInput.showPicker();
});
dateInput.addEventListener('change', (e) => {
  textInput.value = dateInput.value; //You can utilize the Intl API for date formatting.
});

.datepicker {
  width: 8rem;
  position: relative;
}

.datepicker input {
  width: 100%;
  box-sizing: border-box;
}

.datepicker input[type='date'] {
  position: absolute;
  inset: 0;
  z-index: -1;
}

<div class='datepicker'>
  <input type=text placeholder='yyyy/mm/dd'>
  <input type=date>
</div>

Answer 2

If you're looking for a way to enhance your date picker, one interesting approach is to overlay a text input box on top of the date picker. Then, using the showPicker() method, you can trigger the date picker dialog box. By listening to the change event, you can update the text input with any changes made in the date picker. To improve the formatting of the date, consider leveraging the Intl.DateTimeFormat object for locale-specific settings.

Keep in mind that this solution may not work on platforms like CodePen or snippet editors due to security restrictions. You might need to test it on localhost or within your development environment instead.

const textInput = document.querySelector('.datepicker input[type="text"]');
const dateInput = document.querySelector('.datepicker input[type="date"]');
textInput.addEventListener('focus', (e) => {
  dateInput.showPicker();
});
dateInput.addEventListener('change', (e) => {
  textInput.value = dateInput.value; //You can utilize the Intl API for date formatting.
});

.datepicker {
  width: 8rem;
  position: relative;
}

.datepicker input {
  width: 100%;
  box-sizing: border-box;
}

.datepicker input[type='date'] {
  position: absolute;
  inset: 0;
  z-index: -1;
}

<div class='datepicker'>
  <input type=text placeholder='yyyy/mm/dd'>
  <input type=date>
</div>

Answer 3

Answer №2

Technique for concealing the default datepicker icon that is effective in both Chrome and Firefox.

Chrome

The native ::-webkit-calendar-picker-indicator selector is utilized.

Firefox and Other Non-Webkit Browsers

An additional after element is added to the wrapper as an overlay to hide the default icon. This method is exclusive to non-webkit browsers like Firefox.

Alternative Approaches Tested on Firefox

Tried editing the shadow DOM of the datepicker icon -> Deep selector approach did not yield results.
Attempted using a pseudo after element on the input instead of the wrapper -> Only functional in chrome but not in firefox.

.date-input-wrapper {
  width: fit-content;
}

input {
  width: 100%;
}

input[type=date]::-webkit-calendar-picker-indicator {
  visibility: hidden;
}

.date-input-wrapper {
  position: relative;
}

.date-input-wrapper::after {
  display: none;
  width: 17px;
  height: 16px;
  background: red;
  /* background: white; */
  position: absolute;
  content: "";
  right: 0px;
  top: 2px;
}

@supports not selector(::-webkit-calendar-picker-indicator) {
  .date-input-wrapper::before {
    display: block;
  }
}

<div class="date-input-wrapper">
  <input type="date">
</div>

Answer 4

Technique for concealing the default datepicker icon that is effective in both Chrome and Firefox.

Chrome

The native ::-webkit-calendar-picker-indicator selector is utilized.

Firefox and Other Non-Webkit Browsers

An additional after element is added to the wrapper as an overlay to hide the default icon. This method is exclusive to non-webkit browsers like Firefox.

Alternative Approaches Tested on Firefox

Tried editing the shadow DOM of the datepicker icon -> Deep selector approach did not yield results.
Attempted using a pseudo after element on the input instead of the wrapper -> Only functional in chrome but not in firefox.

.date-input-wrapper {
  width: fit-content;
}

input {
  width: 100%;
}

input[type=date]::-webkit-calendar-picker-indicator {
  visibility: hidden;
}

.date-input-wrapper {
  position: relative;
}

.date-input-wrapper::after {
  display: none;
  width: 17px;
  height: 16px;
  background: red;
  /* background: white; */
  position: absolute;
  content: "";
  right: 0px;
  top: 2px;
}

@supports not selector(::-webkit-calendar-picker-indicator) {
  .date-input-wrapper::before {
    display: block;
  }
}

<div class="date-input-wrapper">
  <input type="date">
</div>

Answer 5

Answer №3

In my experience, I found that using

<input type="text">

was actually the simplest approach compared to using

<input type="date">

It really depends on the specific use case, but for us, triggering our own date picker when the user interacted with the input field was the way to go. Plus, you have the flexibility to add your own icon as needed.

<input type="text">

Answer 6

In my experience, I found that using

<input type="text">

was actually the simplest approach compared to using

<input type="date">

It really depends on the specific use case, but for us, triggering our own date picker when the user interacted with the input field was the way to go. Plus, you have the flexibility to add your own icon as needed.

<input type="text">

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring text is perfectly centered within a div, regardless of its length

Styling for older versions of Internet Explorer (IE10 and earlier)

Prevent scrolling within input field

Is there a way to adjust the transparency of specific text when clicking on a different div?

Issues with Bootstrap's hamburger menu not functioning properly when clicked

"Exploring the Dynamic Display of Ajax with HTML5 Canvas

What is the best way to keep a header row in place while scrolling?

Display <div> exclusively when in @media print mode or when the user presses Ctrl+P

Combination of written content and mathematical equations displayed on an HTML webpage

ReactJs CSS - This file type requires a specific loader for processing. There are currently no loaders configured to handle this file

The submission of the form is not functioning correctly when triggered by JavaScript using a button

A div element springs forth into a new window and seamlessly transitions back to its original position with fresh content

CSS: Centralizing a Div Element with Fluid Width

changing background color smoothly in a short time without using JQuery

Identifying and categorizing flip switches with jQuery without relying on div elements

Using an HTML img tag without success, despite having the correct link

Unable to apply inset box-shadow to image

Make the text stand out by highlighting it within a div using a striking blue

Applying custom CSS designs to images using Thymeleaf

Click on a div in AngularJS to be directed to a specific URL