Skip to content

Instantly share code, notes, and snippets.

@sambody
Created November 29, 2013 10:38
Show Gist options
  • Save sambody/7704055 to your computer and use it in GitHub Desktop.
Save sambody/7704055 to your computer and use it in GitHub Desktop.
Set classes to form labels depending on (child) input type. (Taken from StarGazer wordpress theme by Justin Tadlock.)
/*
* Adds classes to the `<label>` element based on the type of form element the label belongs
* to. This allows theme devs to style specifically for certain labels (think, icons).
*/
jQuery( '#container input, #container textarea, #container select' ).each(
function() {
var sg_input_type = 'input';
var sg_input_id = jQuery( this ).attr( 'id' );
var sg_label = '';
if ( jQuery( this ).is( 'input' ) )
sg_input_type = jQuery( this ).attr( 'type' );
else if ( jQuery( this ).is( 'textarea' ) )
sg_input_type = 'textarea';
else if ( jQuery( this ).is( 'select' ) )
sg_input_type = 'select';
jQuery( this ).parent( 'label' ).addClass( 'label-' + sg_input_type );
if ( sg_input_id )
jQuery( 'label[for="' + sg_input_id + '"]' ).addClass( 'label-' + sg_input_type );
if ( 'checkbox' === sg_input_type || 'radio' === sg_input_type ) {
jQuery( this ).parent( 'label' ).removeClass( 'font-secondary' ).addClass( 'font-primary' );
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment