Change background color of single field in submission form

[KPCOZZ]

I have a submission form and want to change the background color of one of the fields. The form element is Cascading AutoComplete and that seems to be the issue with the following code as I have tried substituting the field name "Booking_Unit" for other Text Field form element fields on the form and it works for those fields. 

<style>

#InsertRecordBook_Unit {
background-color: #E0E0E0;
}

</style>
 

Any suggestions please.

[CoopperBackpack]

Hello @KPCOZZ,

According to the forum post https://forums.caspio.com/topic/4377-js-guide-caspio-form-elements/  these form elements can be referenced by id: Text Field/Text Area/Dropdown/Checkbox/Listbox/Hidden.

Ads for the Cascading AutoComplete, as I can see it cannot be referenced just by id because it looks like that:


The part after the InsertRecorduser_email is a so-called uniqueSuffix that is changed every time the DataPage is loaded/refreshed.

You may want to learn more about the uniqueSuffix https://howto.caspio.com/datapages/ajax-loading/

So, please use the CSS selector that selects an element that starts with the corresponding id.

And for me it works only with the !important property.

Please test this one:

<style>

input[id^="InsertRecordBook_Unit"]{
background-color: #E0E0E0  !important;
}

</style>

 

[KPCOZZ]

Thank you, that works fine 

[Queso]

Hi! Thank you for the solution! Just to add more information regarding the CSS solution provided,  it is called CSS Attribute Selector and is useful if the id contains dynamic alphanumeric values. feel free to visit the following URL for more information: 

- https://www.w3schools.com/css/css_attribute_selectors.asp