How to style single and multi select custom fields shown as a list?

Single select and multi select custom fields can be shown as a list instead of a dropdown. To turn it on, open the field in the Custom Fields manager and set View to List with radio buttons (single select) or List with checkboxes (multi select).

The CSS for these lists was added to the default ID layout and ID profile in My Account templates. A template that is already stored in your application is not updated automatically. Without this CSS the list does not look right: for example, the radio buttons are not visible, so users cannot see which option they picked.

How to check your templates

Go to Manage → Templates → ID.
Open the ID layout template and switch to the CSS tab.
Search for .custom-field-option-input.
If it is not there, copy the CSS from the matching section below to the end of the CSS tab and publish the template.
Repeat for the ID profile in My Account template.

If you have never changed a template, you can click Revert to default in the template editor instead. Be careful: this also removes all your own changes in that template.

Each template has its own CSS. Do not copy the same block into both templates, they differ in two rules.

ID layout

This template styles all Identity Management screens: login, registration and custom forms.

CSS

.custom-field-view-list single-select-custom-field,
.custom-field-view-list multi-select-custom-field {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.custom-field-view-list .custom-field-input + .custom-field-label {
  position: static;
  order: -1;
  width: 100%;
  height: auto;
  padding: 0 0 8px;
  transition: none;
  font-weight: 500;
  color: #0f0f15;
}

.custom-field-view-list .custom-field-input + .custom-field-label::before {
  display: none;
}

.custom-field-options-list {
  row-gap: 12px;
}

.custom-field-option {
  column-gap: 14px;
  font-size: 14px;
  line-height: 24px;
  color: #0f0f15;
}

.custom-field-option:has(.checkbox) {
  column-gap: 0;
}

.custom-field-option-input {
  width: 16px;
  height: 16px;
  margin: 4px 0;
  border: 1.5px solid rgba(15, 15, 21, 0.4);
  background-color: #ffffff;
}

.custom-field-option-input[type='radio'] {
  border-radius: 50%;
}

.custom-field-option-input:hover:not(:disabled) {
  border-color: rgba(15, 15, 21, 1);
}

.custom-field-option-input[type='radio']:checked::after {
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0f0f15;
  transform: translate(-50%, -50%);
}

.custom-field-option-input:disabled {
  background-color: #ededed;
  border-color: rgba(15, 15, 21, 0.4);
}

.custom-field-option-input:disabled::after {
  opacity: 0.5;
}

.custom-field-option:has(.custom-field-option-input:disabled) {
  color: rgba(28, 37, 68, 0.5);
  cursor: default;
}

ID profile in My Account

This template styles the user profile in My Account.

CSS

.custom-field-view-list single-select-custom-field,
.custom-field-view-list multi-select-custom-field {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.custom-field-view-list .custom-field-input + .custom-field-label {
  position: static;
  order: -1;
  width: 100%;
  height: auto;
  padding: 0 0 8px;
  transition: none;
  font-weight: 500;
  color: #0f0f15;
}

.custom-field-view-list .custom-field-input + .custom-field-label::before {
  display: none;
}

.custom-field-options-list {
  row-gap: 12px;
}

.custom-field-option {
  column-gap: 14px;
}

.custom-field-option:has(.checkbox) {
  column-gap: 17px;
}

.custom-field-option-input {
  width: 16px;
  height: 16px;
  margin: 4px 0;
  border: 1.5px solid rgba(15, 15, 21, 0.4);
  background-color: #ffffff;
}

.custom-field-option-input[type='radio'] {
  border-radius: 50%;
}

.custom-field-option-input:hover:not(:disabled) {
  border-color: rgba(15, 15, 21, 1);
}

.custom-field-option-input[type='radio']:checked::after {
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0f0f15;
  transform: translate(-50%, -50%);
}

.custom-field-option-input:disabled {
  background-color: #ededed;
  border-color: rgba(15, 15, 21, 0.4);
}

.custom-field-option-input:disabled::after {
  opacity: 0.5;
}

.custom-field-option:has(.custom-field-option-input:disabled) {
  color: rgba(28, 37, 68, 0.5);
  cursor: default;
}

What is different between the two templates

Rule	ID layout	ID profile in My Account
`.custom-field-option`	Also sets `font-size: 14px`, `line-height: 24px` and `color: #0f0f15`	Only `column-gap: 14px`
`.custom-field-option:has(.checkbox)`	`column-gap: 0`	`column-gap: 17px`

Matching your design

You can change colours and sizes to match your site:

#0f0f15 – label text and the dot of a selected radio button
rgba(15, 15, 21, 0.4) – border of radio buttons
#ededed – background of a disabled radio button

Checkboxes in the list keep the checkbox style that your template already has. This CSS sets the layout of the list and the labels for them.

Keep the border and background-color rules on .custom-field-option-input. The radio button has no built-in look, so without them it is not visible.

If the ID custom form template has its own CSS for custom fields, it can override these rules on custom forms.

Last updated: October 15, 2026