CSS Help - overriding important property on list item icon [RESOLVED]

Get Help
,
1

Could use some CSS help.

There is a green custom image icon to the right of the list field that’s I want to be 40x40px, (the size shown in the screenshot.)

I am able to override the styles and increase from 16px to 40px in Dev tools but when I add the CSS highlighted to the stylesheet, the change shown in the screenshot does not update.

https://www.dropbox.com/…/Screen%20Shot%202021-09-01…

Here is the live page. There are two list items in this gravity form where you can see the green icon to the right of the list field is super small.

https://northeastremodeling.com/jobs/

2

Hi Jordan. This CSS is being added inline somewhere:

body .ginput_container_list table.gfield_list tbody tr td.gfield_list_icons img {
	background-color: transparent !important;
	background-position: 0 0;
	background-size: 16px 16px !important;
	background-repeat: no-repeat;
	border: none !important;
	width: 16px !important;
	height: 16px !important;
	opacity: 0.5;
	transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-webkit-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
}

The 16px in all the places are forcing this icon to 16px. I recommend finding that CSS and editing it to be 40px, because overriding it with the !important is going to be difficult. Try editing that to be 40px for the background size and the width and height, and let us know how that goes.

3

Agreed but I think GF is adding that CSS somehow.

4

Like I said, if I could edit this CSS I would but Gravity Forms is injecting this somehow and making this feature on the form unusable.

5

This CSS was somehow being added by GF. I was able to override it by editing the footer.php file in my child theme.

<?php wp_footer(); ?> body .ginput_container_list table.gfield_list tbody tr td.gfield_list_icons img { width: 40px !important; height: 40px !important; }