Skip to content

Instantly share code, notes, and snippets.

@techjewel
Created May 25, 2020 23:10
Show Gist options
  • Save techjewel/3c14b1b4b777f84f0e2360e0c130bafc to your computer and use it in GitHub Desktop.
Save techjewel/3c14b1b4b777f84f0e2360e0c130bafc to your computer and use it in GitHub Desktop.
Fluent Forms Radio as Buttons
// You can make the inline radio button look like button switch
// Steps:
// Add container class of the element "ff_button_style"
// Select Layout: Inline Layout
// Lastly add this css to custom css of the form
.ff-el-group.ff_list_inline.ff_button_style .ff-el-form-check {
background: #d2d2d2;
margin: 0 !important;
padding: 0 !important;
border-left: 1px solid white;
overflow: hidden;
}
.ff-el-group.ff_list_inline.ff_button_style .ff-el-form-check input {
visibility: hidden;
}
.ff-el-group.ff_list_inline.ff_button_style .ff-el-form-check.ff_item_selected {
background: #2196F3;
color: white;
}
.ff-el-group.ff_list_inline.ff_button_style .ff-el-form-check label {
padding: 5px 20px 5px 5px;
display: block;
margin-bottom: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment