Change + and - sign icon size on List field [RESOLVED]

Get Help
, ,
1

I setup a form with the LIST field. I noticed the plus “+” sign icon is rather small especially on mobile. What is the CSS needed to increase the icon size for the LIST field? Also can it be changed within GF so it is responsive or auto scales depending on viewport size?

I tried some CSS below but it is not working.

/* Target the plus and minus buttons for the List field with ID 110 in form ID 1 */
#gform_wrapper_1 .gfield_list_110 .gfield_list_icons a {
    font-size: 24px; /* Adjust the size as needed */
    width: 30px; /* Adjust the width as needed */
    height: 30px; /* Adjust the height as needed */
    line-height: 30px; /* Adjust the line height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}
2

Please share a link to the page on your site where we can see your form with this CSS applied. Thank you.

3

I did manage to get the plus and minus icons larger using this:

/* Target the List field with ID 110 in form ID 1 and override button size variables */
#gform_wrapper_1 .gfield_list .gfield_list_icons button {
    --gf-field-list-btn-size: 32px; /* Adjust the size as needed */
    --gf-field-list-btn-radius: 25px; /* Adjust the radius as needed */
}

It appears that using the CSS variable approach was required for this

1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.