Почему этот css не работает в Firefox?

-1

Я пытаюсь изменить стиль моего типа входного файла. Следующее CSS работает хорошо в Chrome и Opera, но не в Mozilla Firefox.Почему этот css не работает в Firefox?

HTML

<input type="file" class="custom-file-input" />

CSS

.custom-file-input::-webkit-file-upload-button { 
    visibility: hidden; 
} 
.custom-file-input::before { 
    content: 'UPLOAD'; 
    display: inline-block; 
    background: -webkit-linear-gradient(top, black, red); 
    border: 1px solid #999; 
    border-radius: 3px; 
    padding: 5px; 
    outline: none; 
    white-space: nowrap; 
    -webkit-user-select: none; 
    cursor: pointer; 
    font-size: 10pt; 
color:#fff; 
} 
.custom-file-input:hover::before { 
    border-color: #fff; 
} 
.custom-file-input:active::before { 
color:#666; 
    background: -webkit-linear-gradient(top, bclack, red); 
}

http://jsfiddle.net/Rameshpardhi/3agapfw3/

Я также изменил свой стиль к этому:

.custom-file-input::-moz-file-upload-button { 
    visibility: hidden; 
} 
.custom-file-input::before { 
    content: 'UPLOAD'; 
    display: inline-block; 
    background: -moz-linear-gradient(top, black, red); 
    border: 1px solid #999; 
    border-radius: 3px; 
    padding: 5px; 
    outline: none; 
    white-space: nowrap; 
    -moz-user-select: none; 
    cursor: pointer; 
    font-size: 10pt; 
color:#fff; 
} 
.custom-file-input:hover::before { 
    border-color: #fff; 
} 
.custom-file-input:active::before { 
color:#666; 
    background: -moz-linear-gradient(top, bclack, red); 
}

Но все же его не работает. Я хочу знать, почему этот css не работает над Mozzila?

источник

2015-04-28 Ramesh Pardhi

пытаются поставить -moz- перед собственности, как это: -moz-линейно-градиент (сверху, bclack, красный); – icode03

Объясните, что происходит не так, и что должно произойти – Vinc199789

Возможный дубликат [Как я могу создать поле ввода файла в Firefox?] (Http://stackoverflow.com/questions/352467/how-can-i-style-a- file-input-field-in-firefox) – Flynn1179

Я не знаю, что вы ожидаете, но есть кросс-браузерная версия вашей кнопки, которая использует трюк <label>. Не стесняйтесь настраивать CSS (нажмите «view compiled», если вы не используете SASS).

http://codepen.io/mbrillaud/pen/LVEgBy

источник

2015-04-28 13:27:23

Это интересно ... Позвольте мне попробовать ... спасибо за ответ –

Есть ли способ сделать это с помощью css? –

Вам нужно JS, чтобы получить значение ввода, поскольку вход скрыт. Кнопка все еще работает без нее, но вы больше не увидите, какой файл вы выбрали. –

Обратите внимание: объявления -webkit-? Это только для Chrome и Opera. Либо удвоить их, либо заменить их на -moz- или вообще удалить их.

Попробуйте запустить autoprefixer в своем коде, чтобы получить правильный код.

Примечание: Рекомендуемая структура для вас - иметь ярлык вокруг поля ввода и стиля, который.

источник

2015-04-28 13:12:45 Ciprian

Я пробовал это, но его тоже не работает ... –

Можете ли вы обновить свой код с помощью того, что вы пробовали? – Ciprian

Mozilla имеет никакого эквивалента для поставщика не приставкой ::-webkit-form-upload-button. Это проприетарный (т. Е. Нестандартный) и поддерживается только в Webkit & браузерах на основе хрома.

Вы можете получить относительный паритет в IE: https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_file

источник

2016-06-09 14:53:05

Почему этот css не работает в Firefox?

ответ

Смежные вопросы