Fixing broken appearance of text inputs

In some cases, your theme’s CSS might override some of the styles of FSQM, which would result in broken appearance of text inputs. Although, it is nearly impossible to guess which CSS is responsible (due to a rather wide possible variety of CSS codes), we have found the following two very common.

  • Broken height of text input icons.
  • Overlapping input text and icon box.

broken appearance of input boxes

Both of the problems are shown in the screenshot above. The fix is fairly very easy. Just place the following CSS code, somewhere in your theme’s style.css file or any custom CSS file your theme might manage.

/* Fix broken height of text input icons */
.ipt_uif_text {
	margin: 0 !important;
}

/* Fix overlapping icons and input text */
.ipt_uif_front .ipt_uif_icon_and_form_elem_holder input.ipt_uif_text {
	padding-left: 3.8em !important;
}

Swashata has written 245 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).