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

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

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

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

Ответы [ 39 ]

850 голосов
/ 13 сентября 2014

Вам не нужен JavaScript для этого! Вот кросс-браузерное решение:

См. Этот пример! - Работает в Chrome / FF / IE - (IE10 / 9/8/7)

Наилучшим подходом было бы иметь настраиваемый элемент метки с атрибутом for, прикрепленный к скрытому элементу ввода файла. (Атрибут for метки должен совпадать с id элемента файла, чтобы это работало). 

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

В качестве альтернативы вы также можете просто обернуть элемент ввода файла меткой: (пример) 

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

С точки зрения стиля, просто скрыть 1 элемент ввода, используя селектор атрибута . 

input[type="file"] {
    display: none;
}

Тогда все, что вам нужно сделать, это стилизовать пользовательский элемент label. (пример) . 

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 - Стоит отметить, что если скрыть элемент с помощью display: none, он не будет работать в IE8 и ниже. Также следует учитывать тот факт, что jQuery validate не проверяет скрытые поля по умолчанию. Если что-то из этого является проблемой для вас, вот два разных способа скрыть ввод ( 1 , 2 ), которые работать в этих условиях.

190 голосов
/ 03 апреля 2009

Обработка файловых вводов общеизвестно сложна, так как большинство браузеров не изменят внешний вид ни CSS, ни JavaScript.

Даже размер ввода не будет реагировать на подобные: 

<input type="file" style="width:200px">

Вместо этого вам нужно будет использовать атрибут размера: 

<input type="file" size="60" />

Для любого более сложного стиля (например, изменение внешнего вида кнопки обзора) вам необходимо рассмотреть хитрый подход к наложению стилизованной кнопки и поля ввода поверх ввода исходного файла. Статья, уже упомянутая rm на www.quirksmode.org / dom / inputfile.html , является лучшей, которую я видел.

183 голосов
/ 03 марта 2012

выполните следующие действия, после чего вы сможете создавать собственные стили для формы загрузки файлов:

1.) Это простая форма HTML (пожалуйста, прочитайте комментарии HTML, которые я написал ниже) 

<form action="#type your action here" method="POST" enctype="multipart/form-data">
  <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
  <!-- this is your file input tag, so i hide it!-->
  <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <input type="submit" value='submit' >
</form>

2.) Затем используйте этот простой сценарий для передачи события click в тег ввода файла. 

function getFile(){
     document.getElementById("upfile").click();
}

теперь вы можете использовать любой тип стилей, не беспокоясь о том, как изменить стили по умолчанию. Я знаю это очень хорошо, потому что я пытался изменить стили по умолчанию в течение полутора месяцев. поверьте мне, это очень сложно, потому что разные браузеры имеют разные теги ввода загрузки. Так что используйте этот для создания ваших пользовательских форм загрузки файлов. Вот полный код АВТОМАТИЧЕСКОЙ ЗАГРУЗКИ. 

<html>
<head>
<style>
#yourBtn{
   position: relative;
       top: 150px;
   font-family: calibri;
   width: 150px;
   padding: 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #DDD;
   cursor:pointer;
  }
</style>
<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>
</head>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
74 голосов
/ 05 июля 2011

Скройте его с помощью css и используйте пользовательскую кнопку с $ (селектор) .click (), чтобы активировать кнопку обзора. затем установите интервал для проверки значения типа ввода файла. интервал может отображать значение для пользователя, чтобы пользователь мог видеть, что загружается. интервал будет очищен при отправке формы. 

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>


$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});
58 голосов
/ 02 августа 2012

HTML 

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS 

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

JQuery 

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Скрипка : http://jsfiddle.net/M7BXC/

Вы также можете достичь своих целей без jQuery с обычным JavaScript.

Теперь newBtn является связующим звеном с html_btn, и вы можете оформить свой новый btn так, как вам хочется: D

51 голосов
/ 01 мая 2013

Все движки рендеринга автоматически генерируют кнопку при создании <input type="file">. Исторически эта кнопка была совершенно непригодна для стиля. Однако Trident и WebKit добавили хуки через псевдоэлементы.

Trident

Начиная с IE10, кнопка ввода файла может быть стилизована с использованием псевдоэлемента ::-ms-browse. По сути, любые правила CSS, которые вы применяете к обычной кнопке, могут применяться к псевдоэлементу. Например: 

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Это отображается следующим образом в IE10 в Windows 8:

This displays as follows in IE10 on Windows 8:

WebKit

WebKit предоставляет ловушку для своей кнопки ввода файла с псевдоэлементом ::-webkit-file-upload-button. Опять же, почти любое правило CSS может быть применено, поэтому пример Trident будет работать и здесь: 

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Это отображается следующим образом в Chrome 26 на OS X:

This displays as follows in Chrome 26 on OS X:

22 голосов
/ 30 декабря 2016

Я могу сделать это с чистым CSS , используя приведенный ниже код. Я использовал bootstrap и font-awesome. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>
21 голосов
/ 05 августа 2015

Если вы используете Bootstrap 3, у меня это сработало:

См. http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

, которая производит следующую кнопку ввода файла:

Example button

Серьезно, посмотрите http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

20 голосов
/ 23 августа 2012 
 <label>
    <input type="file" />
 </label>

Вы можете обернуть свой ввод type = "file" внутри метки для ввода. Укажите стиль надписи так, как вам нравится, и скройте ввод с помощью display: none;

20 голосов
/ 31 мая 2017

Рабочий пример с поддержкой перетаскивания: https://jsfiddle.net/j40xvkb3/

При оформлении ввода файла, вы не должны прерывать нативное взаимодействие вход обеспечивает .

Подход display: none нарушает встроенную поддержку перетаскивания.

Чтобы ничего не нарушать, вы должны использовать подход opacity: 0 для ввода и расположить его, используя относительный / абсолютный шаблон в оболочке.

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

HTML: 

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS: 

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Вот рабочий пример (с дополнительным JS для обработки события dragover и удаленных файлов).

https://jsfiddle.net/j40xvkb3/

Надеюсь, это помогло!

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...