CSS styling just one of two visible virtual fields in a details page

[Jodie]

I'm trying to add css styling to a details page for one of my two visible virtual fields. The second field is set as an auto text cascade that provides the answer to my user - and so I don't want the same formatting as the input virtual field.

I was able to selectively style the table fields with adding into my header 

#fieldname { 

background-color:#f9f9f9;

}

but when I used cbParamVirtual53 and applied the same code nothing happened for the virtual field. I realise (using f12) the virtual field id has additional numbers which change each time the page is created. Is there a specific way I should be referring to the virtual field in CSS styling in header? 

Any help would be appreciated.

[Ilyrian]

Hi @Jodie

You are correct, you can simply use #cbParamVirtual1 for a selector.
You can try to add !important to se if it makes any difference.

#cbParamVirtual1
{
background-color: red !important;
}

You 

[cheonsa]

Hi @Jodie,

You can check this forum post from Caspio. It provides a guideline for referencing Caspio form elements using JavaScript.

 

[Jodie]

On 2/17/2023 at 3:52 AM, cheonsa said:

Hi @Jodie,

You can check this forum post from Caspio. It provides a guideline for referencing Caspio form elements using JavaScript.

 

Thanks for the reference sheet. I tried document.getElementsByName and using JS to format the second field but no matter what options I tried, I couldn't get one to find the second field ( a virtual cascade) and apply the format.

I've found a work around though. As this form only has two inputs (everything else is display only), I created a new style sheet for this page and just put the formatting for the second virtual field in the style sheet and then customised the first virtual parameter field with the CSS.  The form works how I'd hoped - Users now recognise where to enter data (in the first field )and they see the description in the second 'look up' field.

[CoopperBackpack]

Hello @Jodie,

This CSS rule should work :

<style>
[name="cbParamVirtual2"] {
   background-color: #3d82ab !important;
}
</style>

You may test it if it`s still relevant. 

[autonumber]

Hi! You can also use this code: 

<style>
input[id*="cbParamVirtual1"] {
   background-color: #3d82ab !important;
}
</style>

Hope this helps!