Кросс-браузер пользовательский стиль для кнопки загрузки файла [дубликат]
этот вопрос уже есть ответ здесь:
- как настроить ? 17 ответов
Я пытаюсь настроить кнопку загрузки файла на свои личные предпочтения, но я не мог найти никаких действительно надежных способов сделать это без JS. Я нашел два другое вопросы об этом тема, но ответы там либо задействованы JavaScript, либо предложены англ. х.
моя главная проблема с этим подходом Quirksmode заключается в том, что кнопка "файл" по-прежнему будет иметь определенные браузером размеры, поэтому она не будет автоматически настраиваться на то, что используется в качестве кнопки, расположенной под ней. Я сделал некоторый код, основанный на нем, но он просто займет место, которое обычно занимает кнопка файла, поэтому он вообще не будет заполнять Родительский div, как я хочу к.
HTML:
<div class="myLabel">
<input type="file"/>
<span>My Label</span>
</div>
CSS:
.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
эта скрипка демонстрирует, насколько этот подход является довольно ошибочным. В Chrome нажмите кнопку !!
ниже второй кнопки демо откроет диалоговое окно файла в любом случае, но и во всех других браузерах кнопка файл не занимает правильные области кнопки.
есть ли более надежный способ стилизовать кнопку Загрузить файл, без любой JavaScript и предпочтительно использовать как можно меньше "хакерского" кодирования (поскольку взлом обычно приносит с собой другие проблемы, такие как те, что в скрипке)?
7 ответов
я публикую это, потому что (к моему удивлению) не было другого места, где я мог бы найти, что рекомендовал это.
есть очень простой способ сделать это, не ограничивая вас в браузере-определены входные размеры. Просто используйте <label>
тег вокруг скрытой кнопки загрузки файла. Это обеспечивает еще большую свободу в стилизации, чем стиль, разрешенный через встроенный стиль webkit[1].
бирка ярлыка была сделана для точная цель направления любых событий щелчка по нему на дочерние входы[2], поэтому, используя это, вам больше не потребуется JavaScript для направления события click на кнопку ввода. Вы должны использовать что-то вроде следующего:
label.myLabel input[type="file"] {
position:absolute;
top: -1000px;
}
/***** Example custom styling *****/
.myLabel {
border: 2px solid #AAA;
border-radius: 4px;
padding: 2px 5px;
margin: 2px;
background: #DDD;
display: inline-block;
}
.myLabel:hover {
background: #CCC;
}
.myLabel:active {
background: #CCF;
}
.myLabel :invalid + span {
color: #A44;
}
.myLabel :valid + span {
color: #4A4;
}
<label class="myLabel">
<input type="file" required/>
<span>My Label</span>
</label>
я использовал фиксированное положение, чтобы скрыть вход, чтобы заставить его работать даже в древних версиях Internet Explorer (эмулированный IE8 - отказался работать на visibility:hidden
или display:none
file-input). Я тестировал в эмулированном IE7 и выше, и он работал отлично.
- вы не можете использовать
<button>
s внутри<label>
теги, к сожалению, поэтому вам придется определить стили для кнопок себя. Для меня это единственный недостаток такого подхода. - если
for
атрибут определен, его значение используется для запуска ввода с тем жеid
как на<label>
.
пожалуйста, найдите ниже способ, который работает во всех браузерах. В основном я помещаю вход поверх изображения. Я делаю его огромным, используя размер шрифта, поэтому пользователь всегда нажимает кнопку загрузки.
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 100px;
filter: alpha(opacity=0);
cursor: pointer;
}
<label class="myFile">
<img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
<input type="file" />
</label>
лучший пример-это один, без скрытия, без jQuery, это полностью чистый CSS
http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
<input type="file" class="custom-file-input">
Это, кажется, заботиться о бизнесе очень хорошо. В фидде здесь:
HTML-код
<label for="upload-file">A proper input label</label>
<div class="upload-button">
<div class="upload-cover">
Upload text or whatevers
</div>
<!-- this is later in the source so it'll be "on top" -->
<input name="upload-file" type="file" />
</div> <!-- .upload-button -->
в CSS
/* first things first - get your box-model straight*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
label {
/* just positioning */
float: left;
margin-bottom: .5em;
}
.upload-button {
/* key */
position: relative;
overflow: hidden;
/* just positioning */
float: left;
clear: left;
}
.upload-cover {
/* basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into */
background-color: gray;
text-align: center;
padding: .5em 1em;
border-radius: 2em;
border: 5px solid rgba(0,0,0,.1);
cursor: pointer;
}
.upload-button input[type="file"] {
display: block;
position: absolute;
top: 0; left: 0;
margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
height: 100%;
opacity: .2; /* left this here so you could see. Make it 0 */
cursor: pointer;
border: 1px solid red;
}
.upload-button:hover .upload-cover {
background-color: #f06;
}
любой простой способ покрыть все файловые входы - это просто стиль вашего ввода[type=button] и поместите это во всем мире, чтобы превратить файловые входы в кнопки:
$(document).ready(function() {
$("input[type=file]").each(function () {
var thisInput$ = $(this);
var newElement = $("<input type='button' value='Choose File' />");
newElement.click(function() {
thisInput$.click();
});
thisInput$.after(newElement);
thisInput$.hide();
});
});
вот пример кнопки CSS, которую я получил отhttp://cssdeck.com/labs/beautiful-flat-buttons:
input[type=button] {
position: relative;
vertical-align: top;
width: 100%;
height: 60px;
padding: 0;
font-size: 22px;
color:white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #454545;
border: 0;
border-bottom: 2px solid #2f2e2e;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #2f2e2e;
box-shadow: inset 0 -2px #2f2e2e;
}
input[type=button]:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
Я только что столкнулся с этой проблемой и написал решение для тех из вас, кто использует Angular. Можно написать пользовательскую директиву, состоящую из контейнера, кнопки и элемента ввода с типом file. С помощью CSS вы затем помещаете ввод поверх пользовательской кнопки, но с непрозрачностью 0. Вы устанавливаете высоту и ширину контейнеров точно на ширину и высоту смещения кнопки, а высоту и ширину ввода-на 100% контейнера.
в директива
angular.module('myCoolApp')
.directive('fileButton', function () {
return {
templateUrl: 'components/directives/fileButton/fileButton.html',
restrict: 'E',
link: function (scope, element, attributes) {
var container = angular.element('.file-upload-container');
var button = angular.element('.file-upload-button');
container.css({
position: 'relative',
overflow: 'hidden',
width: button.offsetWidth,
height: button.offsetHeight
})
}
};
});
шаблон jade, если вы используете jade
div(class="file-upload-container")
button(class="file-upload-button") +
input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")
тот же шаблон в html, если вы используете html
<div class="file-upload-container">
<button class="file-upload-button"></button>
<input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" />
</div>
css
.file-upload-button {
margin-top: 40px;
padding: 30px;
border: 1px solid black;
height: 100px;
width: 100px;
background: transparent;
font-size: 66px;
padding-top: 0px;
border-radius: 5px;
border: 2px solid rgb(255, 228, 0);
color: rgb(255, 228, 0);
}
.file-upload-input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
это также легко стиль метки, если вы работаете с Bootstrap и меньше:
label {
.btn();
.btn-primary();
> input[type="file"] {
display: none;
}
}