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

Question

Есть ли в любом случае с помощью CSS или JS, что вы можете изменить размер input type = "file" Кнопка обзора в Firefox?

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

Answer 1

Редактировать: Поскольку другие отметили, что 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/

Answer 2

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

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

Answer 3

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

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

input{font-size: 100px;}

У меня отлично работает.

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

Answer 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">

Answer 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*/
}