如何将 CSS 样式应用于 Drupal 搜索表单提交按钮？

Question

我完全受够了这个。我已经尝试了一周尝试不同的代码，修改不同的值等。我根本无法为我的 Drupal (6) 的搜索提交按钮设置皮肤。

我希望能够将提交按钮换成悬停、活动等事件。最大的问题之一是我不知道如何更改 php 代码，因此这些 CSS 样式仅应用于搜索提交按钮，而不是网站上的所有其他按钮。

这是我目前半工作的代码。现在我面临的另一个问题是，span 标签一直显示大小仅为 45x16px，我已将宽度和高度属性应用为 54x28，但它并没有改变任何东西。

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

Answer 1

如果您想为网站主搜索页面 (www.example.com/search) 的搜索按钮设置主题，您可以在 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";
  }
}

要更改标题或“搜索块”中“主题搜索”的按钮，您必须创建一个名为 search-theme-form.tpl.php 或 search-block-form.tpl.php 并将其放在您的主题目录中。然后插入类似这样的代码：

// 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']; ?>

为了使跨度显示为正确的大小，我通过将display: block; 添加到span.button 的样式来使其工作。它可能会稍微移动按钮，但使用更多 CSS，您可以在任何您喜欢的地方获得它。