Stand Up N3 Теминг file input на css.

В разных браузерах инпут загрузки файлов выглядит по разному.
Есть разные js и css снипеты - некоторые из них кросбраузерные, некоторые работают только на html5.

Теминг file input на css.

1. Любой теминг инпута для загрузки на css требует дополнительные обертки для инпута. Что бы задать обертки для всех file input'ов можно прописать функцию процесса к типу элемента managed_file в хуке hook_element_info_alter()



/**
 * Implements hook_element_info_alter().
 */
function MODULE_element_info_alter(&$type) {
  if (isset($type['managed_file'])) {
    $type['managed_file']['#process'][] = 'MODULE_file_process';
  }
}

2. В процесс функции добавляем нужные обертки через #prefix и #suffix

/**

 * Process function to expand the managed_file element type.

 *

 * @see file_managed_file_process()

 */

function MODULE_file_process($element, &$form_state, $form) {

  $upload = &$element['upload'];

  $title = $upload['#title'] ? $upload['#title'] : t('Upload');

  $upload['#prefix'] = '<div class="btn-upload"><span>';

  $upload['#suffix'] = $title .'</span></div>';

  return $element;

}

3. Теперь можно написать css для кнопки загрузки

.btn-upload {

  display: inline-block;

  color: #FFF;

  font-size: 12px;

  line-height: 20px;

  text-align: center;

  text-decoration: none;

  background-color: #4CAE4C;

  position: relative;

  overflow: hidden;

  border-radius: 4px;

}

.btn-upload span {

  display: inline-block;

  padding: 0 16px;

}

.btn-upload input {

  position: absolute;

  top: 0;

  right: 0;

  cursor: pointer;

  font-size: 12px;

  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

  -moz-opacity: 0;

  -khtml-opacity: 0;

  opacity: 0;

  font-size: 21px;

}

Теперь кнопку загрузки можно темить как угодно, span нужен для возможности задать изображение фоном. Пример на jsfiddle.net