Check Boxes, Radio Boxes, and Input Fields in Genesis Themes

Occasionally when using WordPress themes, but especially when using the Genesis Sample theme, you will run into form elements in some plugins not being styled quite the way you would expect. I have seen this before using form plugins, and an events calendar.

I recently saw it again with a taxonomy query plugin and an ecommerce plugin. For instance, it appeared like there was no item in the cart when there was one item there.

The reason for the styling not being quite as you expect is a combination between the input styles for the child theme and the styles in the plugin. It’s not difficult to fix though. So here are a few things you can look for.

Input Styles

While working with iThemes Exchange, when an item was added to the cart, you couldn’t see that it was added; see image above. Here are the cart input styles:

.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
	max-width: 50px;
	text-align: center;
}

And here are the input styles for the default Genesis Sample theme:

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #eee inset;
	color: #999;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 16px;
	padding: 1.6rem;
	width: 100%;
}

Note the padding: 16px; and padding: 1.6rem; The large padding can often be an issue with plugins that use smaller input fields, especially if the plugin sets a width or max-width for the input that isn’t large enough to compensate for the extra padding, as in the e-commerce cart.

There are two things that you can do to correct the input styles so that the cart item shows. You can either make the cart input field wider or you can use less padding on it.

For a wider input field, you would use:

.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
	max-width: 70px !important;
}

For less padding, you would use:

.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
	padding: 8px;
}

This is how these two styles look; you can see the item added to the cart with both of them. It’s up to you to decide which method you prefer for your theme.

Note that if you don’t see changes to your styles when you add this code, you may need to use an !important declaration to override the plugin styles, as in the first cart input example above.

Check Boxes and Radio Boxes

Here is an image for check boxes for a recently used taxonomy query plugin, but using check boxes with form plugins often does something similar.

The solution is to add a width and height to the check box and radio box inputs.
Note that you may also want to change the vertical alignment for some plugins (so I included it), and with some plugins you may need to use an !important declaration. You can also use a width and height that are a bit larger, depending on how large you want your check boxes to be. I generally use 16px or 18px.

input[type="checkbox"],
input[type="radio"]  {
	height: 14px;
	width: 14px;
	vertical-align: middle;
}

And then you have nicely aligned check boxes.

While these are general solutions, they provide a starting point, if you find your check boxes, radio boxes or inputs not styled as you expected.