Стиль ввода типа=кнопка" файл"

как стиль ввода .

533
css file-io html

30 ответов

ввод файлов стилей, как известно, сложен, так как большинство браузеров не изменят внешний вид ни css, ни javascript.

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

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

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

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

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

164

вам не нужен 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;
}

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

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

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

763

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

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>

наслаждайтесь!

Добрый день,

174

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

<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;
    });
});
73

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-это linkes с html_btn, и вы можете создать свой новый btn, как хотите :D

55

все движки рендеринга автоматически генерируют кнопку, когда это. Исторически сложилось так, что эта кнопка совершенно не поддается стилю. Однако Trident и WebKit добавили крючки через псевдо-элементы.

Тризуб

начиная с 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 на ОС X:

This displays as follows in Chrome 26 on OS X:

48
 <label>
    <input type="file" />
 </label>

вы можете обернуть свой тип ввода= "файл"внутри метки для ввода. Стиль метки, однако вы хотели бы и скрыть вход с display: none;

20

Если вы используете 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/

19

Я могу сделать это с чистый 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>
18

это просто с jquery. Чтобы дать пример кода Райнапредложение с небольшой модификацией.

базовый html:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

обязательно установите стиль на входе, когда будете готовы:opacity: 0 Вы не можете установить display: none потому что он должен быть кликабельный. Но вы можете разместить его под кнопкой "новый" или заправить под что-то еще с z-индексом, если хотите.

настройте некоторый jquery, чтобы щелкнуть реальный вход, когда вы нажмете изображение.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

теперь ваша кнопка не работает. Просто вырезать и вставить значение при изменении.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Тах Дах! Возможно, вам придется проанализировать val() на что-то более значимое, но вы должны быть настроены.

11

TLDR; Пример работающего здесь с родной перетащить и падение поддержки : https://jsfiddle.net/ms3bbazv/4/

при стилизации ввода файла вы не должны нарушать какое-либо собственное взаимодействие входной сигнал обеспечивает.

на 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/ms3bbazv/4/

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

10

видимость: скрытый трюк

Я обычно иду на visibility:hidden фишка

это мой стиль кнопка

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

это кнопка ввода type=file. Примечание visibility:hidden правила

<input type="file" id="upload" style="visibility:hidden;">

это бит JavaScript, чтобы склеить их вместе. Это работает

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>
8

единственный способ, который я могу придумать, - найти кнопку с javascript после ее визуализации и назначить ей стиль

вы также можете посмотреть на эта рецензия

7
<input type="file" name="media" style="display-none" onchange="document.media.submit()">

обычно я использую простой javascript для настройки тега ввода файла.Скрытое поле ввода, по нажатию кнопки, javascript вызывает скрытое поле, простое решение без любого css или кучу jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>
7

вот решение, которое на самом деле не стиль <input type="file" /> элемент, но вместо этого использует <input type="file" /> элемент поверх остальных элементов (которые могут быть стилизованы). The <input type="file" /> элемент на самом деле не виден, следовательно, общая иллюзия имеет красиво оформленный контроль загрузки файлов.

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

Я также протестировал это на Firefox, IE (11, 10 & 9), Chrome и Opera, iPad и нескольких устройствах android.

вот ссылка JSFiddle ->http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

надеюсь, что это помогает!!!

7

вот решение, которое также показывает выбранное имя файла: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

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

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }
3

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

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, Angular-wise я привязываю имя файла к моей $ scope и даю ему начальное значение "нет выбранного файла", я также связываю функция onFileSelect () для моей области, поэтому, когда файл выбирается, я получаю имя файла с помощью API ng-upload и назначаю его $scope.имя файла.

3

может быть много awnsers. Но мне нравится это в чистом CSS с fa-кнопками:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}
<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Скрипка:https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

3

это хороший способ сделать это с загрузкой материала / углового файла. Вы можете сделать то же самое с помощью кнопки bootstrap.

заметь, я использовал <a> вместо <button> это позволяет событиям click всплывать.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>
3

здесь мы используем span для запуска ввода типа file и мы просто настроили этот промежуток, так что мы можем добавить любой стиль, используя этот способ.

Примечание что мы используем входной тег с visibility: hidden option и запускаем его в промежутке.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}
<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

ссылка

3

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

-Эбби

2

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

<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

ТОЛЬКО 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;
}
2

не обманывайте себя "большими" 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

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

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

  1. есть два "поддельных" элемента (текстовый ввод/ссылка) в качестве братьев и сестер для вашего реального ввода файла. Абсолютно расположите их так, чтобы они были точно поверх вашей целевой области.
  2. оберните ввод файла с помощью div. Установите overflow в hidden (чтобы вход файла не разливался) и сделайте его точно размер, который вы хотите, чтобы ваша целевая область была.
  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>
1

очень умное решение с использованием jQuery, который работает в старых браузерах, а также в новых, я нашел здесь. Он заботится обо всех проблемах стиля и щелчка (), используя фактическую кнопку просмотра файла. Я сделал простую версию javascript:скрипка Решение так же просто, как гений: сделайте файл-вход невидимым и используйте кусок кода, чтобы поместить его под mousecursor.

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}
1

в случае, если вы ищете библиотеку javascript-из коробки решение,jquery-fileinput работает нормально.

1

обновление неважно, это не работает в 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;
}

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

Старые Обновления

превратил это в стилус mixin. Должно быть достаточно легко для одного из вас прохладно 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

As JGuo и CorySimmons упомянутый, вы можете использовать кликабельное поведение стилизованной метки, скрывая менее гибкий элемент ввода файла.

<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>

</body>
</html>
1

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

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

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

демо:JSFIDDLE

1