paulzee on "[Plugin: Jetpack by WordPress.com] Jetpack Contact Form: strange corruption in dropdown field list values"

Thanks Jeremy.

Actually, yes: I think I have just gotten to the source of the problem.

I'm glad its rendering OK for you. It's certainly annoying that I can reproduce it pretty consistently on my primary machine & browser.

Just for reference, are you running Windows at all? I'm wondering if it's only appearing under Chrome on Windows (which is where I'm seeing it). Certainly for me on Win Vista, Safari and IE are fine. Another thought I'd had was that it might in some way be resource related: I have a lower-spec'd machine with *lots* of browser tabs open, so available memory might be low.

In any case, it seems to be an artifact of using @font-face.

I am using liberation-sans throughout the site, with the files uploaded and hosted on our WP site. It's pretty much the only font I'm using, and I've overridden all the CSS that I can in my child theme to make it consistently appear everywhere.

I had overridden the Contact-form default styles, and also the base CSS styles for input fields: input>, <textarea>, <submit>, <select>, <label>, etc.

I changed the CSS style for the <select> element to use a different, default font, and the problem was fixed.

However, I really want the displayed selected element itself to be in the liberation-sans font.

Unfortunately, the <option> elements don't appear to accept a font or font-family override, so what I've done is hack the grunion-contact-form.php to introduce an <optgroup> element wrapper for the options, and styled that.

$r .= "\t\t<optgroup label='Choose one of the following:'>\n";
	foreach ( $this->get_attribute( 'options' ) as $option ) {
		$option = Grunion_Contact_Form_Plugin::strip_tags( $option );
		$r .= "\t\t\t<option" . selected( $option, $field_value, false ) . ">" . esc_html( $option ) . "</option>\n";
	}
	$r .= "\t\t</optgroup>\n";

and the CSS addition:

.contact-form select optgroup {
font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, Geneva, Sans-serif;
font-size: 14px;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
}

This patches the problem, however the downside is a) I've had to change the plugin file directly, and b) the optgroup obviously introduces an unselectable first row in the drop-down list: either blank or with a label (as above). I had tried to force the line-height to be 0 in an effort to hide the first row, which didn't work and would have affected all rows anyway.

I'm not certain whether the actual problem is a side-effect of using smaller sized @font-face font files (they exclude some non-english characters etc, that the drop-down rendering might have been trying to use), or whether it's an aspect/ side effect of using a custom font.

If it's the former, I guess the fix is to regenerate the font files including whatever is currently missing. However, I'm not quite sure where to begin with figuring that out.

If it's the latter, then maybe introducing the option group as a contact form option would provide a workaround?

Suggestions?