diff --git a/packages/cli/templates/form-trigger.handlebars b/packages/cli/templates/form-trigger.handlebars index f6532a869b..40fbd485e3 100644 --- a/packages/cli/templates/form-trigger.handlebars +++ b/packages/cli/templates/form-trigger.handlebars @@ -295,9 +295,46 @@ } input[type='checkbox'] { + appearance: none; width: var(--checkbox-size); height: var(--checkbox-size); + border: 1px solid var(--color-input-border); + border-radius: 3px; cursor: pointer; + position: relative; + } + .multiselect-checkbox:checked { + background: var(--color-focus-border); + border-color: var(--color-focus-border); + } + .multiselect-checkbox:checked::after { + content: '✔'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-size: var(--font-size-label); + font-weight: bold; + } + + .multiselect[data-radio-select] .multiselect-checkbox { + border-radius: 50%; + width: var(--checkbox-size); + height: var(--checkbox-size); + display: flex; + align-items: center; + justify-content: center; + } + + .multiselect[data-radio-select] .multiselect-checkbox:checked { + background: white; + border-color: var(--color-focus-border); + border-width: 4px; + border-radius: 50%; + } + .multiselect[data-radio-select] .multiselect-checkbox:checked::after { + content: ''; } /* required field ----------------------------- */ .form-required { @@ -454,7 +491,22 @@ {{#if isMultiSelect}}