Как получить доступ к свойствам кнопки загрузки файла?

Question

Можете ли вы показать мне, как назначить свойства CSS для кнопки, которая имеет тип = файл, скажем:

<input type="file"  name="coolFile">

Я знаю, что в css вам нужно это сделать:

  input[type=file]{
     background:#ccf;
//and so on
}

Как назначить значения для кнопки?

Answer 1

К сожалению, основные браузеры не позволяют дизайнерам напрямую стилизовать поля ввода файлов. Вы можете считать это «функцией безопасности», потому что пользователи могут быть обмануты при загрузке файлов, если поле ввода файла хитро оформлено.

Существует решение, которое включает в себя создание второго поля ввода и скрытие фактического ввода файла за ним. Следующее было снято с http://www.quirksmode.org/dom/inputfile.html:

div.fileinputs {
    position: relative;
}

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

input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

<div class="fileinputs">
    <input type="file" class="file" />
    <div class="fakefile">
        <input />
        <img src="search.gif" />
    </div>
</div>

Answer 2

Если вы хотите изменить текст кнопки, вот один урок о том, как это сделать:

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

Если это просто простые свойства CSS, такие как цвет / граница / и т. Д., У вас уже есть ответ, вам просто нужно проверить материал, чтобы выяснить, почему он не работает.

Answer 3

Вы используете DOM / JavaScript , например:

document.getElementById("id").style.property="value"