Стилизация кнопки ввода type = "file" - PullRequest
Новая
       104

Стилизация кнопки ввода type = "file"

621 голосов
/ 21 февраля 2009

Как стиль кнопки ввода type="file"?

Ответы [ 39 ]

3 голосов
/ 03 июня 2016

ТОЛЬКО CSS

Используйте это очень просто и ЛЕГКО

Html: 

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

Css: 

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}
3 голосов
/ 13 июля 2015

На этой неделе мне также потребовалось настроить кнопку и отобразить выбранное имя файла в стороне от нее, поэтому после прочтения некоторых из ответов выше (спасибо, кстати) я пришел к следующей реализации:

HTML: 

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS 

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript (угловой) 

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

В основном я работаю с ng-file-upload lib. В угловом плане я привязываю имя файла к своему $ scope и присваиваю ему начальное значение «Файл не выбран», я также связываю onFileSelect ( ) в моей области, поэтому, когда файл выбран, я получаю имя файла с помощью ng-upload API и назначаю его $ scope.filename.

2 голосов
/ 09 сентября 2017

Не дайте себя одурачить «отличными» CSS-решениями, которые на самом деле очень специфичны для браузера, или которые накладываются на стилизованную кнопку поверх реальной кнопки, или которые заставляют вас использовать <label> вместо <button>, или любой другой подобный взлом. JavaScript необходим, чтобы заставить его работать для общего пользования. Пожалуйста, изучите, как это делают gmail и DropZone, если вы мне не верите.

Просто введите обычную кнопку по своему усмотрению, затем вызовите простую функцию JS, чтобы создать и связать скрытый элемент ввода с вашей стилизованной кнопкой. 

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

Обратите внимание, как приведенный выше код перекомпоновывает его после каждого выбора пользователем файла. Это важно, потому что «onchange» вызывается, только если пользователь меняет имя файла. Но вы, вероятно, хотите получать файл каждый раз, когда пользователь его предоставляет.

2 голосов
/ 04 сентября 2013

Я нашел очень простой способ переключить кнопку файла на изображение. Вы просто помечаете картинку и помещаете ее поверх кнопки файла. 

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

При нажатии на помеченное изображение вы выбираете кнопку файла.

2 голосов
/ 21 июня 2012

CSS может многое сделать здесь ... с небольшой хитростью ... 

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: ссылки :: http://site -o-matic.net /? Viewpost = 19

-abbey

1 голос
/ 05 апреля 2017

Эти ответы хороши, и все они работают для очень конкретных случаев использования. То есть они самоуверенные.

Итак, вот ответ, который ничего не предполагает, но будет работать независимо от того, как вы его измените. Вы можете изменить дизайн с помощью css, добавить javascript, чтобы, возможно, отображать имя файла при изменении, и т. Д., Это все равно всегда будет работать.

Код:

Вот ядро ​​css 

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

и основной html: 

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

Как видите, мы заставляем любое событие указателя (щелчок), которое происходит с элементом .file-input или любым из его дочерних элементов, проксировать на вход файла. Это связано с тем, что входной файл расположен абсолютно и всегда будет использовать ширину / высоту контейнера. Поэтому вы можете настроить в соответствии с вашими потребностями. вставьте оболочку в кнопку, используйте js, чтобы отобразить имя файла при выборе, и т. д. ничто не сломается до тех пор, пока вышеуказанный основной код останется без изменений.

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

Демо-версия: JSFIDDLE

1 голос
/ 26 ноября 2013

Если вам нужна библиотека javascript - готовое решение, jquery-fileinput работает нормально.

1 голос
/ 24 декабря 2013

Обновление Не важно, это не работает в IE или его новом брате, FF. Работает с каждым другим типом элемента, как и ожидалось, но не работает с файлами ввода. Гораздо лучший способ сделать это - просто создать файл ввода и метку, которая ссылается на него. Сделайте так, чтобы при вводе файла ничего не отображалось, и бум, он работает в IE9 + без проблем.

Предупреждение: все, что ниже, это дерьмо!

Используя псевдоэлементы, расположенные / измеренные относительно их контейнера, мы можем обойтись только одним входным файлом (без дополнительной разметки) и стилем, как обычно.

Демо 

<input type="file" class="foo">

.foo {
    display: block;
    position: relative;
    width: 300px;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.foo:hover:after {
    background: #5978f8;
}
.foo:after {
    transition: 200ms all ease;
    border-bottom: 3px solid rgba(0,0,0,.2);
    background: #3c5ff4;
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: 'Upload Something';
    line-height: 60px;
    border-radius: 5px;
}

Наслаждайтесь, ребята!

Старое обновление

Превратил это в миксин Stylus. Это должно быть достаточно просто для одного из вас, крутых котов SCSS, чтобы преобразовать его. 

file-button(button_width = 150px)
  display block
  position relative
  margin auto
  cursor pointer
  border 0
  height 0
  width 0
  outline none
  &:after
    position absolute
    top 0
    text-align center
    display block
    width button_width
    left -(button_width / 2)

Использование: 

<input type="file">

input[type="file"]
    file-button(200px)
1 голос
/ 08 января 2015

Лучший способ - использовать псевдоэлемент: after или: before в качестве элемента, перезаписывающего вход de. Затем стилизуйте этот псевдоэлемент по своему желанию. Я рекомендую вам в качестве общего стиля для всех входных файлов сделать следующее: 

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}
1 голос
/ 03 марта 2013

Вот простое решение только для CSS, которое создает согласованную целевую область и позволяет вам стилизовать ваши искусственные элементы так, как вам нравится.

Основная идея такова:

  1. Имейте два "фальшивых" элемента (текстовый ввод / ссылка) в качестве родных элементов к вашему реальному вводу файла. Абсолютно расположите их так, чтобы они были точно над вашей целевой областью.
  2. Оберните ваш файл ввода с div. Установите для переполнения значение «скрытый» (чтобы входной файл не появлялся) и задайте размер, точно соответствующий размеру целевой области.
  3. Установите непрозрачность на 0 при вводе файла, чтобы он был скрыт, но при этом можно было нажимать. Присвойте ему большой размер шрифта, чтобы вы могли нажимать на все части целевой области.

Вот jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...