How do I add cross symbol in textbox?

Question

I have a view with an exposed filter for the node titles. I want to add X in that exposed filter.

I know html5 provides feature to have cross symbol when the input type is search. I tried changing #type in hook_form_alter() for the text-field to search, but it doesn't work.

Is it possible in Drupal 7?

Answer 1

You can do something like below:

write below code in any module

function modulename_theme() {
  $themes = array (
      'search_input' => array(
      'render element' => 'element',
    ),   
  );
  return $themes;
}

/**
 * Implementation of hook_element_info()
 */
function modulename_element_info(){
  $types['search_input'] = array
  (
    '#input' => TRUE,
    '#theme' => 'search_input',
    '#theme_wrappers' => array('form_element'),
  );

  return $types;
}

write below code in template.php:

function themename_search_input($variables){ //echo "<pre>";print_r($variables);exit;
  $element = $variables['element'];
  $element['#attributes']['type'] = 'search';
  element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength'));
  _form_set_class($element, array('form-number'));

  $extra = '';
  if ($element['#autocomplete_path'] && !empty($element['#autocomplete_input']))
  {
    drupal_add_library('system', 'drupal.autocomplete');
    $element['#attributes']['class'][] = 'form-autocomplete';

    $attributes = array();
    $attributes['type'] = 'hidden';
    $attributes['id'] = $element['#autocomplete_input']['#id'];
    $attributes['value'] = $element['#autocomplete_input']['#url_value'];
    $attributes['disabled'] = 'disabled';
    $attributes['class'][] = 'autocomplete';
    $extra = '<input' . drupal_attributes($attributes) . ' />';
  }

  $output = '<input' . drupal_attributes($element['#attributes']) . ' />';

  return $output . $extra;
}

In cs file:

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

and use #type = search_input. It may help you