Checkbox Behavior: Checkbox Unseen; Possibly From Padding?

HTML & CSS
1

I have a form at the bottom of the site. When you click the checkbox, the checkbox is barely visible, possibly due to the padding that has been coded in the CSS. If I was to modify this within a browser inspector by removing the padding, you can see the checkbox. However, when I post the code live, and while the updated CSS is present, the same issue occurs.

The previous developers created CSS to where the checkmark appears as a ::before pseudo element. CSS below:

.gfield input:not(.main-content .gfield input), .gfield select:not(.main-content .gfield select), .gfield textarea:not(.main-content .gfield textarea) {
border: 1px solid var(--white);
background-color: transparent;
font-weight: 400;
font-size: 16px;
color: var(--white);
padding: 0.35em 0.8em;
letter-spacing: -0.05em;
border-radius: 0px !important;
line-height: 1;
}

.gchoice input[type="checkbox"] {
appearance: none;
width: 1.5em;
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
transition: ease all .25s;
cursor: inherit;
}

gchoice input[type="checkbox"]::before {
content: url("data:image/svg+xml,%3Csvg fill='%23FFF' xmlns='http://www.w3.org/2000/svg' viewBox='25 25 50 50'%3E%3Cpath d='m64 985.393-3.531 3.532-16.719 16.718-4.469-3.937-3.75-3.281-6.593 7.53 3.78 3.282 8 7 3.5 3.094 3.313-3.313 20-20 3.531-3.53L64 985.392z' overflow='visible' transform='translate(0 -952.362)'/%3E%3C/svg%3E");
width: 100%;
height: 100%;
opacity: 0;
transition: ease opacity .25s;
}

.gchoice input[type="checkbox"]:checked::before {
opacity: 1;
}

.gchoice input[type="checkbox"]:checked {
background: var(--color-1);
}

Appreciate the help!

Thank you.

2

checkbox is visible to me on a phone.

On phone so i cant view source at the moment.. if the CSS is in a separate file, navigate your browser to that file and manually refesh it before opening the main page, to avoid browser caching. It sounds like youre seeing a cached old version.

1 Like
3

None of the checkmarks are showing and I would just add the following code (after the original) to get them back on track.

.gchoice input[type=checkbox]{
    padding:4px 0 0!important;
    width:2.5rem;
    height:auto;
}
.gchoice input[type=checkbox]:before{
    width:70%;
}

I didn’t see any of your updated css and the code you posted above is not the one that removes the padding so as @m_hutley said make sure its not a cache issue first.

1 Like
4

Most likely a caching issue. If your CSS is in an external stylesheet, open the CSS file directly and force-refresh it, then reload the page. Your browser may be using an older cached copy of the CSS instead of the updated version.

5

Thank you, @PaulOB . This worked!

1 Like
6

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