How to disable datepicker arrow for a specific class
<p>I have been looking at <a href="https://stackoverflow.com/questions/11320615/disable-native-datepicker-in-google-chrome">this question</a> and <a href="https://stackoverflow.com/questions/11418289/remove-background-arrow-from-date-input-in-google-chrome-v20">this question</a> and <a href="https://stackoverflow.com/questions/17954966/how-to-get-rid-of-x-and-up-down-arrow-elements-of-a-input-date">this question</a> and they have all been very helpful in getting rid of the small arrow on a <strong>datepicker</strong> using:</p>

<pre><code>input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
</code></pre>

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

<p>I would like to do something like:</p>

<pre><code>input[class="buttonOnly"]::-webkit-calendar-picker-indicator { display: none; }
</code></pre>

<p>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?</p>