Infopath forms in SharePoint have some weird css styles when inspected.

There area number of ways to include css (see this link: Add-a-Custom-Style-Sheet-to-a-View.aspx) but they are limited by the weird, and what appears to be, computed class names.An example



This is really frustrating when trying to target specific elements, nobody wants to write css with that!!

I find embedded form web parts to be the best way to include Infopath forms in Sharepoint and they allow some external manipulation – such as query string integration and filtering – and also enable easier styling on the rendered objects via a script editor webpart.

An interesting problem raised its head – making InfoPath forms ready for mobile & tablet and finger friendly – the multi choice selection boxes have very little in way of styling that you can access, just padding, font size, borders… The lines are too close together and the checkboxes are too small.

Sadly these boxes don’t have a nice targetable name, they are part of a fieldset in a stupidly named div, so we can’t easily specify what to manipulate and just chuck in some css. We also want to change all the checkboxes throughout the form not just one field.

We can however use attribute selectors in CSS = [attribute$=value]

See here for more info http://www.w3schools.com/css/css_attribute_selectors.asp

Simply add the following code to the script editor webpart and bingo… finger friendly InfoPath


<Style>
input[type="checkbox"]{
padding:5px;
height:25px;
width:25px;
}
</Style>