Question

CSS for a form field border

Forms

Updated June 10, 2022

asked on June 9, 2022

I have a nicely set up set of 6 questions with 4 radio buttons under each header.

I would like to separate the questions with slight borders around them to make them clearly distinct but still fit the real estate.

I am on the new form designer (v11) and see these CSS flag things, but do not know how to use them.

Any one have a direction to go? I am not a web guy so no clue about css or java, or more than bare bones html.

thanks

0 0

Replies

replied on June 9, 2022

You can add a CSS class to the field and use " .needsborder label{ border-top: 2px solid black;}" to set top border for the field label to seperate them

1 0

replied on June 10, 2022

The comment from @████████is your answer.

But I wanted to give a little more background to help.

When you see an ID value in HTML, you can reference those with the # symbol, like this: #q99

When you see a Class value in HTML, you can reference those with the . symbol, like this: .pdc

So, to modify your code slightly, this should work:

#q99 {
    border-bottom: 2px solid black;
}

The downside with that is it only applies to that one field, the one with ID of q99. You could include more fields with commas: #q99, #q100, #q101 - but it's still pretty one-off.

Refering to the pdc class would impact every field on the form, so you probably don't want that either.

Which is why Xiuhong's response is best because it's setting up a reusable custom class that can be applied to any field you need, with only the one line of CSS code.

0 0

You are not allowed to follow up in this post.

Question

Question

CSS for a form field border

Replies

Sign in to reply to this post.