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

Display the text above overlapping div elements

As each new line is added, the span text starts from the bottom and moves up by one line

working with html data in a bootstrap modal using javascript

Is it possible to modify a website's CSS permanently using just the browser?

Interactive carousel featuring responsive image zoom effect on hover

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Customizing CSS for Various Browser Sizes

Find the ID of the clicked table row using HTML and JavaScript

Using jQuery to apply a CSS class to a chosen radio button

Switching the typeface within the content data

I am searching for answers to solve issues related to a JSON file

What is the best method for retaining just a specific portion of HTML code within Webbrowser VB.Net?

Developing a sliding menu with AngularJS

To determine whether a variable is an integer in PHP

Tips for adding images using v-for in Vue 3

What steps should be taken to enlarge a checkbox within a table?

Remove identical options from the dropdown menu

Maximizing the functionality of PHP switch to create clickable list items

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

How can you verify a phone number input?