Is it possible to change the color of the * at a required field?
3 Likes
Welcome to the Community, @eSport_Event_GmbH
Sure! Here is the code that should be added to the Custom CSS field on the Appearance tab of your widget’s settings:
[class*="FieldContainer__FieldLayout-sc"]:has([aria-required="true"]) [class*="FormFieldLayout__Label-sc"] {
position: relative;
display: inline-block !important;
}
[class*="FieldContainer__FieldLayout-sc"]:has([aria-required="true"]) [class*="FormFieldLayout__Label-sc"]:after {
content: '*';
color: red;
display: inline-block;
position: relative;
right: 0;
transform: translateX(-100%) !important;
}
You can set any other color in the line with color
:
4 Likes
And is it possible to hidden the *?
2 Likes
Sure! Here is the code that should be added to the Custom JS field on the Settings tab of your widget’s settings:
const WIDGET_ID = '2083ddf4-1c9d-4448-a45e-7cf36b088884';
const waitForElement = (selector, root = document) =>
new Promise((res) => {
const observer = new MutationObserver(() => {
const element = root.querySelector(selector);
if (element) {
res(element);
observer.disconnect();
}
});
observer.observe(root, { childList: true, subtree: true });
});
waitForElement(`#eapps-form-builder-${WIDGET_ID}`).then((form) => {
const labels = form.querySelectorAll(' [class*="FormFieldLayout__Label-sc"]');
labels.forEach(
(label) => (label.textContent = label.textContent.replace('*', ''))
);
});
Check it out and let me know if it worked
2 Likes