Измените размер кнопки input type="file" в Firefox?

В любом случае, используя CSS или JS, вы можете изменить размер кнопки input type="file" Browse в firefox?

Я знаю, что вы не можете изменить текст кнопки, но все, что мне нужно сделать, это сделать эту кнопку более широкой для Firefox. Поэтому использование правила -moz css было бы идеальным.

Ответ 1

Кнопки ввода файлов стилей очень ограничены по соображениям безопасности. Есть некоторые обходные пути, но ни один из них не идеален. Проверьте этот пост на QuirksMode:

http://www.quirksmode.org/dom/inputfile.html

Ответ 2

Изменить: Как уже отмечалось, firefox не поддерживает описанный ниже метод, я бы назвал следующую ссылку http://www.quirksmode.org/dom/inputfile.html

Следующее - довольно простое решение. Однако я бы посоветовал добавить класс на ярлык. В основном вы создаете ярлык вместо ввода, избегая проблем с кросс-браузером и ошибок ширины и высоты:

<label>
  <input type=file>
</label>

CSS

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;}
label {background:green;width:200px;height:100px;display:block; /* more styles here */}

http://jsfiddle.net/DVLxp/

Ответ 3

Вот основная идея: http://www.quirksmode.org/dom/inputfile.html

И это может быть полезно для изменения размера области ввода

input{font-size: 100px;}

Прекрасно работает для меня.

Ответ 4

Попробуйте следующее: http://jsfiddle.net/CnHj5/ Работы в Firefox и хороший указатель курсора доступны.

HTML:

<div class="upload">
    <input class="upload" type="file" />
</div>

CSS

input.upload {
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    position: absolute;
    right:0;
    font-size: 200px;
    cursor: pointer;
}
div.upload {
    background-color:green;
    width:200px;
    height:100px;
    position: relative;
    display:block; 
    overflow:hidden;}

Ответ 5

Какие веб-сайты часто делают, когда им нужен "настроенный" виджет загрузки файлов: скрытое "реальное" поле для загрузки файлов. Добавьте текстовое поле, в котором будет отображаться текущее значение поля загрузки файла и кнопка, которая приведет к выбору файла в поле загрузки файла. Вот пример:

<input id="file" type="file" style="display: none;"
       onchange="document.getElementById('text').value = this.value;">

<input id="text" type="text" readonly><input type="button"
       onclick="document.getElementById('file').click();" value="Choose file">

Ответ 6

Что касается меня, Женя Шевченко дал одно из лучших рабочих решений. Используя его метод, мы можем создать кнопку ввода файлов с несколькими браузерами: http://jsfiddle.net/JHcFR/

<div class="fileInput">
    <input type="file" />
</div>

.fileInput {
  overflow: hidden; width: 500px; height: 200px; background: red;
}
.fileInput input {
  font-size: 200px; opacity: 0;
  float: right; filter: alpha(opacity=0); /*IE*/
}