How do I set the css cursor to "not-allowed" when a Select2 dropdown is disabled?

DeeGee 0
Viewed 26

I have a data-entry div where all the select boxes are Select2. When in "view" mode rather than "edit" mode, the form elements (input, select, textarea) are disabled. To disable them, I use

$('#myDiv input, select, checkbox, textarea').each(function () {
  $(this).prop("disabled", true);
});

I have tried these in the style sheet, but they have no effect on the Select2 elements:

select:disabled {cursor:not-allowed;}
.select2:disabled {cursor:not-allowed;}
.select2-disabled {cursor:not-allowed;}
.select2-disabled .select2-result-label {cursor:not-allowed;}
jquery-select2 jquery
1 Answers

You can use:

.select2-container--default.select2-container--disabled .select2-selection--single { cursor:not-allowed }

as this is the selector in select2.css that sets the cursor to default

This doesn't work in using the SO snippet CSS box (or in jsfiddle) as the fiddle CSS is (annoyingly) rendered before the HTML, so any HTML css <link> overrides the snippet css, but you can add an extra layer as demo'd here https://jsfiddle.net/orkyLbh7/ or you can ensure your css appears after the select2.css:

$('.select2').select2();
$("select, input").prop("disabled", true)
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<style>
  .select2-container--default.select2-container--disabled .select2-selection--single {
    cursor: not-allowed
  }
</style>

<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<input type='text'>

freedomn-m0
Related