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?

sbgib · Accepted Answer · 2021-02-02 08:05:58Z

0

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" />

answered Feb 2, 2021 at 8:05

sbgib

5,8583 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1