Checkbox Issues

Please first try changing the “Plugin Style” setting in Site Reviews to “minimal”.

Just tried that and it does fix the checkbox shape but the box is now invisible / black. You can only see it if you check the box. There’s also no border around the text boxes now.

When the minimal plugin style is used, Site Reviews uses your active theme’s CSS styles for form elements.

I see that you are using the Sinatra theme and that you have added some custom CSS. This custom CSS is making the background in your form fields black.

I can also see that your checkbox border inherits the font colour. So if you set the colour of checkboxes to white, it will fix the checkbox:

.custom-background input[type=checkbox] {
    color: #fff;
}

However, if you use the minimal plugin style then you will also need to set a few other custom CSS rules, such as the validation colours:

.glsr-has-errors,
.glsr-field-error {
    color: #d32f2f;
}
.glsr-field-error {
    font-size: .8rem;
}
.glsr-required label span::after {
    content: '*',
    color: #d32f2f;
}

Thank you! That’s much better! What about the border around the text boxes? Can I get that back? It was gray before changing to the minimal style.

textarea,
input[type="text"],
input[type="email"] {
    border-color: rgba(255, 255, 255, .5);
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #7187f2;
}

Perfect! Thanks so much!