Подтвердить что ты не робот

Можем ли мы изменить стиль <input type="file">?

Я попытался изменить форму HTML, файл типа ввода. Вот мой код:

HTML, форма id = form

<input class="upload_file" type="file" id="file" name="file" />

.CSS

I tried both:
.upload_button{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

#form input[type=file]{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

Ни один из этих методов не работает. Я видел некоторые веб-сайты, такие как facebook, youtube, google или твиттер, у них разные стили. Интересно, как они это делают.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы ничего не можете сделать с файлом типа ввода (кроме огромных хаков). Я знаю, что это звучит ужасно, но веб-стандарты до сих пор не нашли решения для этого.

Я бы предположил, что вы использовали что-то более гибкое, например swfUpload, что позволяет изменять стиль, а также проверьте размер файла перед загрузкой.

Некоторые опрятные примеры можно найти здесь

Надеюсь, это поможет вам

Ответ 3

Лучший хак. Входной файл HTML:

<input type="file" class="hide" id='inputFile' />
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a>

с помощью jQuery:

$('#triggerFile').on('click', function(e){
        e.preventDefault()
        $("#inputFile").trigger('click')
    });

Ответ 4

Почему бы вам просто не поставить css для отображения: none, а затем запустить эту кнопку с помощью другой кнопки? Это можно легко сделать с помощью javascript, а затем вы можете полностью стилизовать кнопку

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

Ответ 5

Вы можете изменить font-Size для высоты или следовать этому URL http://www.quirksmode.org/dom/inputfile.html (что в основном я делаю в своих проектах).

Ответ 6

На самом деле вы можете!

Вы должны сделать это с помощью библиотеки SI.Files.

Здесь - хорошая статья о том, как это делается в деталях:

Удачи!

Ответ 7

Bhee, просто добавьте определения CSS в свой тег ввода html:

как:

<select style:"...whatYoureadBelow..."></select>

или

<input style:"...whatYoureadBelow..." />

Определения CSS:

border:none;
background-image:url('somePathToImage');
background-repeat:no-repeat;
//those things below adjust according to your background image size
width:XXpx;
height:XXpx;

Таким образом, вы получите то, что у вас есть на facebook или в другом месте;)