1

I have been looking at this question and this question and this question and they have all been very helpful in getting rid of the small arrow on a datepicker using:

input[type="date"]::-webkit-calendar-picker-indicator { display: none; }

However, I have multiple date fields in one of my views and I would like to only disable the datepicker arrow for the fields that have a specific class.

I would like to do something like:

input[class="buttonOnly"]::-webkit-calendar-picker-indicator { display: none; }

But it does not seem to be working. I'm hoping this is a simple syntax issue but I can't seem to find any examples. Is something like this frowned upon or am I just missing something?

Community
  • 1
  • 1
Ona_17
  • 35
  • 1
  • 8
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Jul 07 '16 at 15:57
  • 1
    instead of input[class="buttonOnly"] use input.buttonOnly – Hoyen Jul 07 '16 at 15:57
  • @Hoyen Yes that worked beautifully! I knew it would be something as simple as that. I feel quite silly. Thank you! – Ona_17 Jul 07 '16 at 16:01

1 Answers1

1

Use .class selector along with with attribute selector

input[type="date"].disabled::-webkit-calendar-picker-indicator {
  display: none;
}
<input type="date" class="disabled">

<input type="date">
Rayon
  • 36,219
  • 4
  • 49
  • 76