Checkbox Styling

  1. How can I remove scroll from field type checkboxes? When adding more than 12 options a scroll appears, I would rather display all without scroll.

  2. How can I style the small squares on the individual checkboxes. I have tried the CSS below and it only adds border around the outer square. What am I missing?

.hp-field--checkboxes,
checkbox,
input[type=checkbox]{
	border: solid 1px rgba(17, 157, 164, .3);
	width:100%;
	padding: 10px;
}

**I have tried this also

.hp-field--checkboxes,
checkbox,
input[type=checkbox]{
border: solid 1px rgba(17, 157, 164, .3);
width:100%;
padding: 10px;
}
.hp-field--checkboxes,
checkbox,
input[type=checkbox]:before{
border: solid 1px rgba(17, 157, 164, .3);
width:100%;
padding: 10px;
}
.hp-field--checkboxes,
checkbox,
input[type=checkbox]:after{
border: solid 1px rgba(17, 157, 164, .3);
width:100%;
padding: 10px;
}

Thanks

Sorry for the inconvenience, but customization is beyond our support scope - it includes fixing bugs and guidance about the available features Support Policy | HivePress

If customizations are required for your site, please try customizing it using the collection of code snippets Search · user:hivepress · GitHub and other developer resources, or consider hiring someone for custom work https://fvrr.co/32e7LvY

I worked it out in the end, took hours. I think it would be better with a border around the check boxes as standard though so it is more obvious to a new user what they are supposed to be checking off. Maybe an unofficial Facebook group or forum for the theme where users can help each other out with simple things like this could be a good idea. For most themes I have used in the past if you get stuck you can ask other people with the same theme and they help each other out.

.hp-field input[type=checkbox]+span::before {

border: solid 1px rgba( 17, 157, 164, 0.7);

}

Thanks.

2 Likes

Thanks for sharing! We’ll try to build the community here, because Facebook is not really suitable for searching solutions, suggesting and voting for features, etc, it’s also not good for formatting the code snippets and other code-related features. We’re collecting ready-made code snippets here Search · user:hivepress · GitHub

Hope this helps.

1 Like

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