Add Border to Single Choice field

How can I put a border around the single choice fields on the form referenced above?

Hi Thomas,

Thanks for reaching out to Jotform Support. I checked your form and noticed that there are multiple Single Choice fields. To better assist you, could you let us know exactly what kind of border style or format you're looking to apply to these fields? If you have a sample image or example, that would be very helpful in coming up with the right workaround for your needs.

Once we hear back from you, we'll be able to help you with this.

Reban:

I want a box type of border to completely surround the single choice field. For illustration purposes, make it have rounded corner, blue in color and moderately thick. Pick any single choice field and I can edit the code to fit other single choice fields.

Thanks

Tom

Hi Tom,

Sure, you can transform a Single Choice element to have a thick, blue, rounded border by injecting custom CSS into your form. Let me show you how:

1. First, copy this code:

.form-dropdown {

    width: 220px !important;

    border: 2px solid blue !important;

    border-radius: 25px !important;

}

2. In your Form Builder, click the Wand icon located on the right side of the page.

3. In the Form Designer, go to the Styles tab, and paste the code at the last line of the Inject Custom CSS area. You will then see the changes in the Single Choice elements.

That's it. Test your form, and you’ll see that the Single Choice fields now have a thick, blue, rounded border. Check out the screencast below for the result:

Give it a try and let us know how it goes.

Reban:

They a actually Multiple Choice fields, not Single Choice fields. Sorry

Thanks

Tom

Hi Tom,

I have edited the code to target one of the Multiple Choice fields in your form. Follow the steps shared by my colleague to add the CSS code to your form.

[data-css-selector="id_171"] {

    border : 2px solid blue !important; /*replace the color with a supported color name or its HEX code*/

    border-radius : 25px !important; /*change the number of pixels to adjust the thickness of the border*/

}

You can edit the code by adding the IDs of the fields you want to target. Check out the screencast below to see the result:

Give it a try and let us know if you need any help.