In questo periodo sto dedicando il tempo libero al ridisegno del sito della mia comitiva, che, come è facilmente intuibile dal titolo del post, è basato su Drupal.
Ebbene, mi son trovato di fronte al problema del disegno dell’elemento
<input type="submit" />
che in Firefox e Opera viene visualizzato correttamente, mentre in IE (per quanto ne so io) viene sempre mal interpretato, con sfondi che non si vedono ed effetti sgradevoli.
Una soluzione al problema può essere l’uso dell’elemento
<button type="submit>Valore</button>
che viene interpretato in modo grezzo dal browser, così da poter essere stilizzato a piacimento, anche su IE.
Per quanto riguarda Drupal è possibile modificare l’output dei bottoni nei form aggirando il classico theme_button() con uno personalizzato, da aggiungere, ovviamente, nel famoso template.php nella directory del tema in uso:
function phptemplate_button($element) {
// Make sure not to overwrite classes.
if (isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
}
else {
$element['#attributes']['class'] = 'form-'. $element['#button_type'];
}return '<button type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) .">". check_plain($element['#value'])."</button>\n";
}
A questo punto è possibile personalizzare lo stile del bottone via CSS usando il seguente selettore:
form button[type="submit"] {
background: url(images/bg.gif) no-repeat;
font: bold 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
border: none;
width: 120px;
height: 28px;
cursor: pointer;
margin-bottom: 10px;
}
modificando a piacimento i valori delle proprietà.
Per ulteriori approfondimenti (e spunti): post su
