Background of the cell

[sandy159]

Hello,

I have a Submission form and want to change the background of the cell when the user changes or enters the values.

For example, here is the initial view:

Once the data is entered, the background is changed:

How this is possible?

[CoopperBackpack]

Hello @sandy159,

You may try to add this code to the DataPage Footer section:

<script type="text/javascript">

document.addEventListener('DataPageReady', updateColor);
 
  function updateColor() {

  const recordsListArr = document.querySelectorAll('[id*=InsertRecord]');

  recordsListArr.forEach(element=>element.addEventListener('change', (event) => {
  	element.style.backgroundColor = '#acdbdf';
    })
)};
</script>

By this code we select all source fields that have the following Form elements: Text Field/Text Area/Dropdown/Listbox.

You may customize the background color if needed.

[telly]

Hi @sandy159,

You may use this code, you can input it in the header of the DataPage:

<style>
input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
  background-color: red;
}
</style>
 

[telly]

For customizing your DataPage, this will help you, https://howto.caspio.com/tech-tips-and-articles/common-customizations/tech-tip-5-ways-to-customize-the-look-of-your-datapages/
- https://www.w3schools.com/cssref/sel_attribute_value.asp
- https://howto.caspio.com/styles/