forms
Adding containers to Drupal form elements
So, I ran into an issue recently where I needed to add a container <div> to stylize my Drupal form elements. The issue was two-fold. One, I wanted to style form elements differently depending upon type, and two, I needed a container <div> that only wraps the form element and not the label.
Problem: I need a container around the <input> tag so that I can make the background of the input transparent, ditch the border then place a background image that is not attached to the <input> tag (there are scrolling issues in IE if the bg is set for the input tag). This way I can end up with a nice rounded input that matches the site theme.
This won't work for me:
<div id="edit-field-address1-0-value-wrapper" class="form-item">
<label for="edit-field-address1-0-value">Address</label>
<input id="edit-field-address1-0-value" class="form-text required text" type="text" value="" size="60" name="field_address1[0][value]"/>
</div>Quick fix in template.php using theme_form_element() (Look for the line "ADD A CONTAINER DIV WITH A CLASS BASED UPON ELEMENT TYPE")
<?php
/**
*implementation of theme_form_element().
*/
function mytheme_form_element($element, $value) {
// This is also used in the installer, pre-database setup.
$t = get_t();
$output = '<div class="form-item"';
if (!empty($element['#id'])) {
$output .= ' id="'. $element['#id'] .'-wrapper"';
}
$output .= ">\n";
$required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';
if (!empty($element['#title'])) {
$title = $element['#title'];
if (!empty($element['#id'])) {
$output .= ' <label for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
}
else {
$output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
}
}
// ADD A CONTAINER DIV WITH A CLASS BASED UPON ELEMENT TYPE
$output .= "<div class = 'round-" . $element['#type'] . "'> " . $value . "</div>\n";
if (!empty($element['#description'])) {
$output .= ' <div class="description">'. $element['#description'] ."</div>\n";
}
$output .= "</div>\n";
return $output;
}
?>Resulting HTML:
<div id="edit-field-address1-0-value-wrapper" class="form-item">
<label for="edit-field-address1-0-value">Address</label>
<div class="round-textfield">
<input id="edit-field-address1-0-value" class="form-text required text" type="text" value="" size="60" name="field_address1[0][value]"/>
</div>
</div>Above you can see the <div class="round-textfield"> wrapping my form element. Now, I am able to style the container div based upon which type of field it is!
