Стиль <input type="file">

Возможный дубликат:
Стиль input type= "file"

Я пытался стилить

<input type="file">

но мне не повезло. Я хочу, чтобы текстовое поле исчезло и осталось только кнопку. Как я могу это сделать?

ОТВЕТЫ

Ответ 1

Способ CSS (базовый код найден здесь):

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

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

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>

Ответ 2

Нет простого способа перекрестного браузера для стиля ввода типов файлов. Поэтому существует решение, в котором даже используется javascript.

Вот плагин jQuery, который вы можете использовать для создания типов файлов в кросс-браузере:

Браузеры не позволяют создавать файл стиля входы. Плагин File Style исправляет это проблема. Это позволяет использовать изображение как кнопка обзора. Вы также можете filename как нормальное текстовое поле используя css. Он написан с использованием JavaScript и jQuery.

Вы можете проверить демо здесь

Как также размещено на популярном ajaxian.com, вы можете также взглянуть на это:

Шон Инман имеет прекрасную маленькую взломать, что позволяет вам стилизовать файл входы с CSS и DOM.

Эти элементы, как известно, болезненные иметь дело, и теперь мы выбрали в коробке играет хорошо на IE, нам нужно что-то еще исправить:)

Ответ 3

Я написал этот плагин jQuery, чтобы упростить стиль ввода файла. Используйте CSS и "поддельные элементы", чтобы получить нужные результаты.

http://github.com/jstnjns/jquery-file

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

Ответ 4

<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">

Ответ 5

некоторым браузерам необходимо, чтобы входной файл был видимым, и нажмите кнопку обзора вручную, или он ничего не отправит серверу. поэтому я предлагаю первое решение Saefraz: плагин File Style для jQuery