How to apply to CSS styles to Drupal search form submit button?

I'm absolu开发者_如何转开发tely fed up with this. I've been trying for a week trying different code, modifying different values etc. I simply cannot skin my Drupal (6)'s search submit button.

I want to be able to swap out the submit buttons for events like hover, active, and such. One of the biggest issues is that I can't figure out how to change the php code so these CSS styles only are applied to the search submit button, not all the other buttons on the site.

Here is the code I have semi-working at the moment. Right now another issue I face is that, the span tag keeps showing the size is only 45x16px, I've applied width and height properties to be 54x28 but it doesn't change anything.

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'];
  }

  // We here wrap the output with a couple span tags
  return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span>\n";
}

span.button  {
    background-image: url('images/go-button.png');
    background-repeat: no-repeat;
    border: none;
    width: 53px;
    height: 28px;
}
span.button:hover {
    background-image: url('images/go-button-gifsmooth.gif');
    background-repeat: no-repeat;
    border: 0;
}
span.button:active {
    background-image: url('images/go-button-pressed.png');
    background-repeat: no-repeat;
    border: 0;
}
span.button span input {
    background: transparent;
    border: 0;
    color: transparent;
    padding: 0;
    cursor: pointer;
}

If you want to theme the search button for the sites main search page (www.example.com/search), you can use this in template.php:

function phptemplate_button($element) {
  // Check that the buttons belongs to the site search page
  if ($element['#value'] == 'Search' && $element['#id'] == 'edit-submit') {
    // 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'];
    }

    // We here wrap the output with a couple span tags
    return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span><div style='clear:both;'></div>\n";
  }
  else {
    return '<input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
  }
}

To alter the button for the "theme search" in header or the "search block", you will have to create a tpl file named either search-theme-form.tpl.php or search-block-form.tpl.php and place it in your theme directory. Then insert code similar to this:

// This is for the theme search... for search block, $search['search_block_form']
<?php print $search['search_theme_form']; ?>
<span class="button"><span><input type='submit' name='submit-form' value='TEST' class='this-submit'/></span></span>
<?php print $search['hidden']; ?>

To make the span display as the correct size, I got it working by adding display: block; to the style for span.button. It may move the button around a little, but with some more CSS you can get it wherever you like.