0

I have a select field:

<select class="form-control" data-admin--reports-form-target="sendFrequencySelect" name="automated_digest_task[send_frequency]" id="automated_digest_task_send_frequency"><option value="86400">1 day</option>
<option value="259200">3 days</option>
<option value="604800">7 days</option>
<option value="1209600">14 days</option>
<option value="2629746">1 month</option>
<option value="7889238">3 months</option>
<option value="15778476">6 months</option>
<option value="31556952">1 year</option></select>

...which I am setting to readonly via JS (I use Stimulus):

this.sendFrequencySelectTarget.readOnly = true;

I want to use readonly instead of disabled because disabled causes the select to not be submitted with a form, and I want it submitted.

Setting to readonly does indeed make the field readonly, but it doesn't cause the select to appear any different.

What I want is the field to be readonly, but its appearance to be that of a disabled select. That is, the background color dims to a gray and the cursor changes to not-allowed on mouseover.

I have tried applying styles to selectors like select[readonly], select:read-only, select[readonly="readonly"], input[type="select"]:read-only, but none of these selectors seem to work.

For example...

select[readonly] {
  cursor: not-allowed;
}

... has no effect.

How can I style readonly selects to appear disabled?

David Gay
  • 1,094
  • 2
  • 16
  • 32
  • 2
    According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select the `select` tag doesn't have a `readonly` attribute, only `disabled`. So that might be where you're running into problems. https://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input In any case, please include some example HTML/CSS to make this a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – WOUNDEDStevenJones Mar 11 '21 at 17:23
  • Aside from as noted that selects dont officially have a readonly state, if you're setting that in js whats stopping you adding a class at the same time for styling purposes? – Jamiec Mar 11 '21 at 17:29
  • @Jamiec Nothing. That works. I can apply the style via JS. I was just hoping to be able to style all readonly selects with one stroke of CSS. – David Gay Mar 11 '21 at 17:49
  • @DavidGay you can `select.readOnly{ ... yourCss ... }` and `this.sendFrequencySelectTarget.classList.add("readOnly");` – Jamiec Mar 11 '21 at 19:20

0 Answers0