Hide webkit pseudo using jquery

Question

I am trying to hide the calendar icon that appears next to a input of type date. I have no problem hiding it using css.

::-webkit-calendar-picker-indicator { display: none; }

However I only want to hide it in certain circumstances so need to hide with jquery or javascript but what ever I try it will not hide.

$("::-webkit-calendar-picker-indicator").css("display", "none");

Primarily I am only concerned with chrome.

How do I hide this webkit element using jquery?

related: https://stackoverflow.com/q/54749402/8620333 – Temani Afif Feb 02 '21 at 08:18 — Temani Afif, Feb 02 '21 at 08:18

score 0 · Answer 1 · answered Feb 02 '21 at 08:05

Detect Webkit, then add a class:

if (navigator.userAgent.indexOf('AppleWebKit') != -1) {
  //Add any other conditions here
  $('input[type=date]').addClass('webkitDate');
}

.webkitDate::-webkit-calendar-picker-indicator {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" />

1 Answers1