Кросс-браузер пользовательский стиль для кнопки загрузки файла [дубликат]

этот вопрос уже есть ответ здесь:

Я пытаюсь настроить кнопку загрузки файла на свои личные предпочтения, но я не мог найти никаких действительно надежных способов сделать это без 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 и выше, и он работал отлично.


  1. вы не можете использовать <button>s внутри <label> теги, к сожалению, поэтому вам придется определить стили для кнопок себя. Для меня это единственный недостаток такого подхода.
  2. если 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;
    }
}