Change background color for Select

PHPMaker General Discussion (PHPMaker)
1

in custom.css file (v2020 * v2021) ,
form .field_required {
background-color: #ffcc00;
}and in client script (v2020)
$(“#x_status”).addClass(“field_required”);
work fine.But in v2021, (I think now using select2)
$(“#x_status”).addClass(“field_required”);
I can see the background-color changed and go back to default.May I know what is the correct way to fix the color for the select2 (tablelookup) field?Regards

2

You may check the CSS selector of the element in Chrome, see Get Started With Viewing And Changing CSS.

3

Actually, I did check with the css selector using the F12 in chrome. But still no luck to make it work.only 1 id => x_status… still checking…

        <div class="col-sm-10"><div >
<span id="el_products_status">
    <select
        id="x_status"
        name="x_status"
        class="form-control ew-select"
        data-select2-id="products_x_status"
        data-table="products"
        data-field="x_status"
        data-value-separator=", "
        data-placeholder="Status"
         class="form-control">
        <option value="">&nbsp;</option><option value="1" selected>Enable</option>    </select>
        <div class="invalid-feedback">Incorrect integer - Status<br>Please enter required field - Status</div>
<script>
loadjs.ready("head", function() {
    var el = document.querySelector("select[data-select2-id='products_x_status']"),
        options = { name: "x_status", selectId: "products_x_status", language: ew.LANGUAGE_ID, dir: ew.IS_RTL ? "rtl" : "ltr" };
    options.data = ew.vars.tables.products.fields.status.lookupOptions;
    options.dropdownParent = $(el).closest("#ew-modal-dialog, #ew-add-opt-dialog")[0];
    Object.assign(options, ew.vars.tables.products.fields.status.selectOptions);
    ew.createSelect(options);
});
</script>
</span>
4

You need to check the CSS styles of the element, not just the id of the element. (Select2 uses themes, it is different from normal HTML select element, see: https://github.com/ttskch/select2-bootstrap4-theme.

5

eg. I have 4 select2 items in a form,
fromdate1, todate1
fromdate2, todate2Created

.select2-selection__rendered {
  background-color: yellow;
}

in css, & this will apply to all 4 itemsWhat if I wanna make fromdate(1|2) to have .css(“background”, “yellow”) &
todate(1|2) to have .css(“background”, “pink”).I try to create

$("#x_fromdate1, #x_fromdate1").addClass("from_date");
$("#x_todate1, #x_todate1").addClass("to_date");

and add

.from_date.select2-selection__rendered {
  background-color: yellow;
}
.to_date.select2-selection__rendered {
  background-color: pink;
}

to css and few others way.Ths output is just a flash and back to default (white background)I did search from the internet and test on all posibility but can’t get the expected output.I also tested on $([id=xxx]), but somehow is just a flash, not permanent.Thanks in advance for all input

6

Problem solved. Thanks for all input.

7

Glad to hear you found a solution to working with these select boxes. They have been a thorn to me in a couple of GRIDADD scenarios
would you mind posting your solution?Thanks
Brian