Как изменить размер кнопки входного файла?

Question

Я работаю со стилизацией входного файла методом непрозрачности - кнопка реального входного файла имеет непрозрачность 0, а перед ней используется z-index - другой вход (с непрозрачностью: 1). К сожалению, я хочу, чтобы моя видимая кнопка была в квадрате изображения (ширина: высота: 1: 1), а невидимый входной файл всегда был прямоугольным (поле ввода и поле выбора с соотношением сторон 1:10). Вопрос в том, как изменить размер кнопки входного файла, чтобы она была в квадрате (или любого размера), чтобы сделать всю видимую область кнопок кликабельной (потому что только нажатие невидимой кнопки вызывает открытие окна браузера). Теперь только часть видимой кнопки «кликабельна».

CSS:

   <style type="text/css">
   .upload {
        position:relative;
    width:100px;
   }

   .realupload {
    position:absolute;
    top:0;
    right:0;
    opacity:0.5;
    -moz-opacity:0.5;
    filter:alpha(opacity:0.5);
    z-index:2;
    width:100px;
   }

   form .fakeupload {
    background: url(images/bglines.png);
   }

   form .fakeupload input {
    width:0px;
   }

   </style>

И html:

<form>
   <li class="upload">
    <div class="fakeupload">
        <input type="text" name="fakeupload" style="opacity: 0;"/>
    </div>
    <input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" />
   </li>
   </form>

Answer 1

У нас был похожий случай.

Это не супер элегантно, но вместо ввода нескольких файлов вы можете попробовать следующее:

• увеличил размер шрифта ввода , чтобы увеличить ширину кнопки
• установить родительский относительный элемент переполнение: скрыто
• (необязательно) Установите высоту на 100%

Как и в демонстрации здесь (на основе демонстрации Скотта)

Работает только в Firefox

Answer 2

Чтобы сократить тип файла ввода область нажатия кнопки , вы можете попробовать использовать это:

form .fakeupload input {
    width:20px;
    transform: scale(0.23,1);
}

Это сузит область нажатия на файл типа ввода. (Вы можете использовать transform: scale (x, y) - с x и y - это число, которое соответствует вашим потребностям. Не забудьте добавить надлежащий стиль для мобильных устройств или различных браузеров.

Answer 3

Возможно, проблема в неправильном HTML.- Вы не можете иметь теги формы вне тегов li.

Мне кажется, это нормально работает ... Демонстрация здесь

Answer 4

попробуйте использовать тип ввода "изображение"?

В противном случае вам нужно будет обязательно установить параметр display: block на кнопку ввода.