Jump to content
  • 0

Change background color of single field in submission form


KPCOZZ
 Share

Question

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.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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:
sLMW4Q0.png

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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...