• Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Sign Up
  • Log Out
  • Get Easy Forms
  • Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Sign Up
  • Log Out
  • Get Easy Forms
home/Knowledge Base/Advanced Techniques
Popular Search:Getting Started

How to Display Radio Buttons as Buttons

31 views August 7, 2020 admin 1

Would you like to customize the Radio input fields to look like buttons? You could even style the buttons to have the color you need to match your company branding. In this tutorial, we’ll show you how to use CSS to customize these form fields.

Customize Radio Fields to Look Like Buttons

Steps:

1. With the form builder add a Radio Button component. By default, Radio Buttons appear with a radio in front of the label to be checked.

2. Click the Radio Buttons fields and uncheck the first option and add the following Container CSS Class: btn-group.

3. Go to Themes -> Create Theme and use the following CSS code:

.btn-group .radio {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0;
    font-size: 14px;
    line-height: 1.42857143;    
    /*Colors*/
    color: #FFF;
    background-color: #eb950c;
    border-color: #c9800a;
}

.btn-group .radio:focus, .btn-group .radio:hover, .btn-group .radio input[type=radio]:checked + label {
    /*Colors*/
    color: #FFF;
    background-color: #c9800a;
    border-color: #8a5807;
}

.btn-group .control-label {
    display: none;
}

.btn-group .radio input {
    display: none;
}

.btn-group .radio label {
    padding: 6px 12px;
    width: 100%;
}

4. Finally, go to Forms -> Actions -> Settings -> UI Settings. And select the created theme.

That’s all!

Was this helpful?

1 Yes  No
Related Articles
  • Create Users that Can Only Submit Forms
  • How To Calculate Age From Date Of Birth
  • Calculate the Number of Days between Two Dates
  • Create Users that Only Can Manage Form Submissions of Shared Forms
  • Reject Email Addresses From Specific Domains
  • How to Compare two email fields and Submit only if they are the same
Leave A Comment Cancel reply

You must be logged in to post a comment.

Advanced Techniques
  • How to Display Radio Buttons as Buttons
  • Create Users that Can Only Submit Forms
  • How To Calculate Age From Date Of Birth
  • Calculate the Number of Days between Two Dates
  • Create Users that Only Can Manage Form Submissions of Shared Forms
  • Reject Email Addresses From Specific Domains
View All 16  
Popular Articles
  • How to enable / disable DEBUG mode
  • How to update Form Stats from the command line
  • How to RTL (right-to-left) a Form?
  • How to Remove the Default Choice from a Select List Field
  • How to Insert an Image into a Notification or Confirmation Email
KB Categories
  • Add-Ons
  • Advanced Techniques
  • Common Issues & Troubleshooting
  • Developers "How To's"
  • How To
About Easy Forms

With Easy Forms you can create unlimited web forms and most importantly the complete management of them without paying monthly fees

Resources
  • Knowledge Base
  • Documentation
  • Pre-sales Questions
  • Blog
Useful Help Links
  • Get Easy Forms
  • Live Demo
  • License Terms
  • Contact Us
Frequent Visit Links
  • Pre-Sales Questions
  • System Requirements
  • Installing Easy Forms
  • Upgrading Easy Forms
  • Privacy Policy
  • © 2015 - 2020 Baluart EIRL. All Rights Reserved.