examples - html atom
Estilo de un tipo de entrada=botón "archivo" (30)
Cómo el estilo del botón de entrada type="file" .
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
Fiddle : http://jsfiddle.net/M7BXC/
También puedes alcanzar tus objetivos sin jQuery con JavaScript normal.
Ahora el newBtn está vinculado con el html_btn y puedes diseñar tu nuevo btn como quieras: D
VISIBILIDAD: truco oculto
Suelo apostar por la visibility:hidden truco visibility:hidden
este es mi botón de estilo
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
Este es el botón de entrada tipo = archivo. Tenga en cuenta la visibility:hidden regla visibility:hidden
<input type="file" id="upload" style="visibility:hidden;">
Este es el bit de JavaScript para pegarlos juntos. Funciona
<script>
$(''#uploadbutton'').click(function(){
$(''input[type=file]'').click();
});
</script>
¡No necesitas JavaScript para esto! Aquí hay una solución de navegador cruzado:
¡Mira este ejemplo! - Funciona en Chrome / FF / IE - (IE10 / 9/8/7)
El mejor enfoque sería tener un elemento de etiqueta personalizada con un atributo for adjunto a un elemento de entrada de archivo oculto . (La etiqueta for atributo debe coincidir con el id del elemento del archivo para que esto funcione).
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
Como alternativa, también podría simplemente envolver el elemento de entrada de archivo con una etiqueta directamente: (example)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
En términos de estilo, simplemente oculte 1 el elemento de entrada usando el selector de atributo .
input[type="file"] {
display: none;
}
Entonces todo lo que necesita hacer es diseñar el elemento de label personalizada. (ejemplo) .
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 : vale la pena señalar que si oculta el elemento mediante la display: none , no funcionará en IE8 y en las versiones anteriores. También tenga en cuenta el hecho de que jQuery validate no valida los campos ocultos de forma predeterminada. Si cualquiera de esas cosas es un problema para usted, aquí hay dos métodos diferentes para ocultar la entrada ( 1 , 2 ) que funciona en estas circunstancias.
Ejemplo de trabajo aquí con soporte nativo de arrastrar y soltar: https://jsfiddle.net/ms3bbazv/4/
Al diseñar una entrada de archivo, no debe interrumpir ninguna de las interacciones nativas que proporciona la entrada .
La display: none aproximación rompe el soporte nativo de arrastrar y soltar.
Para no romper nada, debe usar el enfoque de opacity: 0 para la entrada, y colocarlo usando un patrón relativo / absoluto en una envoltura.
Con esta técnica, puede dragenter fácilmente una zona de clic / soltar para el usuario, y agregar una clase personalizada en javascript en el evento de dragenter para actualizar los estilos y proporcionarle al usuario un comentario que le permita ver que puede soltar un archivo.
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;
}
Aquí hay un ejemplo de trabajo (con JS adicional para manejar eventos dragover y archivos eliminados).
https://jsfiddle.net/ms3bbazv/4/
Espero que esto haya ayudado!
Aquí hay una solución que no diseña realmente el elemento <input type="file" /> , sino que utiliza un elemento <input type="file" /> sobre otros elementos (que pueden tener un estilo). El elemento <input type="file" /> no es realmente visible, por lo tanto, la ilusión general es la de un control de carga de archivos con un estilo agradable.
Me encontré con este problema recientemente y, a pesar de la gran cantidad de respuestas en , ninguna realmente parecía encajar en el proyecto de ley. Al final, terminé personalizando esto para tener una solución simple y elegante.
También he probado esto en Firefox, IE (11, 10 y 9), Chrome y Opera, iPad y algunos dispositivos Android.
Aquí está el enlace de 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>
¡¡¡Espero que esto ayude!!!
Aquí hay una solución simple solo para css, que crea un área objetivo consistente y le permite diseñar sus elementos falsos como desee.
La idea básica es esta:
- Tenga dos elementos "falsos" (una entrada de texto / enlace) como hermanos a su entrada de archivo real. Colóquelos absolutamente para que estén exactamente en la parte superior de su área objetivo.
- Envuelva su entrada de archivo con un div. Establezca el desbordamiento en oculto (para que la entrada del archivo no se derrame), y haga que tenga exactamente el tamaño que desea que tenga su área objetivo.
- Establezca la opacidad en 0 en la entrada del archivo para que esté oculta pero aún se pueda hacer clic. Dale un tamaño de fuente grande para que puedas hacer clic en todas las partes del área objetivo.
Aquí está el 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>
Aquí hay una solución, que también muestra el nombre del archivo elegido: 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; }
Aquí utilizamos un intervalo para activar la entrada de tipo de archivo y simplemente personalizamos ese intervalo , por lo que podemos agregar cualquier estilo de esta manera.
Tenga en cuenta que usamos la etiqueta de entrada con visibilidad: opción oculta y la activamos en el intervalo.
.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>
El estilo de las entradas de archivo es muy difícil, ya que la mayoría de los navegadores no cambiarán la apariencia de css o javascript.
Incluso el tamaño de la entrada no responderá a gustos de:
<input type="file" style="width:200px">
En su lugar, tendrá que utilizar el atributo de tamaño:
<input type="file" size="60" />
Para cualquier estilo más sofisticado que eso (por ejemplo, cambiar el aspecto del botón de navegación), deberá observar el enfoque engañoso de superponer un botón con estilo y un cuadro de entrada en la parte superior de la entrada del archivo nativo. El artículo ya mencionado por rm en www.quirksmode.org/dom/inputfile.html es el mejor que he visto.
Esta es una buena manera de hacerlo con la carga de archivos de material / angular. Podrías hacer lo mismo con un botón de arranque.
Tenga en cuenta que usé <a> lugar de <button> esto permite que los eventos de clic aumenten.
<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>
Esta semana también tuve que personalizar el botón y mostrar el nombre del archivo seleccionado a un lado, así que, después de leer algunas de las respuestas anteriores (gracias BTW), se me ocurrió la siguiente implementación:
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 (Angular)
app.controller(''MainCtrl'', function($scope) {
$scope.fileName = ''No file chosen'';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});
Básicamente, estoy trabajando con ng-file-upload lib, de forma angular estoy enlazando el nombre de archivo a mi $ alcance y dándole el valor inicial de ''No se seleccionó ningún archivo'', también estoy vinculando la función onFileSelect () a mi alcance, así que cuando se selecciona un archivo, obtengo el nombre de archivo utilizando la API ng-upload y lo asigno a $ scope.filename.
Esto es simple con jQuery. Dar un ejemplo de código de la sugerencia de con una ligera modificación.
HTML básico:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
Asegúrese de establecer el estilo en la entrada cuando esté listo: opacity: 0 No puede configurar la display: none porque necesita poder hacer clic. Pero puede colocarlo debajo del botón "nuevo" o meterlo debajo de otra cosa con el índice z si lo prefiere.
Configure algunos jquery para hacer clic en la entrada real cuando haga clic en la imagen.
$(''#image_icon'').click(function() {
$(''#the_real_file_input'').click();
});
Ahora su botón está funcionando. Simplemente corte y pegue el valor cuando se cambie.
$(''input[type=file]'').bind(''change'', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
Tah dah! Es posible que deba analizar el val () para algo más significativo, pero debe estar todo configurado.
He encontrado un método muy fácil para cambiar el botón de archivo a una imagen. Solo etiqueta una imagen y la coloca sobre el botón de archivo.
<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>
Al hacer clic en la imagen etiquetada, selecciona el botón de archivo.
La única forma en que puedo pensar es encontrar el botón con javascript después de que se renderice y asignarle un estilo.
También puede ver www.quirksmode.org/dom/inputfile.html
No se deje engañar por las "excelentes" soluciones solo para CSS que son en realidad muy específicas del navegador, o que superponen el botón con estilo en la parte superior del botón real, o que lo obligan a usar una <label> lugar de un <button> , o cualquier otro hack similar. JavaScript es necesario para que funcione para el uso general. Por favor, estudia cómo lo hacen gmail y DropZone si no me crees.
Simplemente diseñe un botón normal como desee, luego llame a una función JS simple para crear y vincular un elemento de entrada oculto a su botón con estilo.
<!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>
Observe cómo el código anterior lo vuelve a vincular después de cada vez que el usuario elige un archivo. Esto es importante porque "onchange" solo se llama si el usuario cambia el nombre del archivo. Pero es probable que desee obtener el archivo cada vez que el usuario lo proporcione.
Ocúltelo con css y use un botón personalizado con $ (selector) .haga clic () para activar el botón de búsqueda. luego establezca un intervalo para verificar el valor del tipo de entrada de archivo. el intervalo puede mostrar el valor para el usuario para que el usuario pueda ver qué se está cargando. el intervalo se borrará cuando se envíe el formulario [EDITAR] Lo siento, he estado muy ocupado con la intención de actualizar esta publicación, aquí hay un ejemplo
<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;
});
});
Puedo hacerlo con CSS puro usando el código de abajo. He utilizado bootstrap y tipografía impresionante.
<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>
Si está utilizando Bootstrap 3, esto funcionó para mí:
Ver 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>
Que produce el siguiente botón de entrada de archivo:
En serio, consulte http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
Tal vez muchos awnsers. Pero me gusta esto en CSS puro con fa-buttons:
.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"/>
Todos los motores de renderización generan automáticamente un botón cuando se crea un <input type="file"> . Históricamente, ese botón ha sido completamente impensable. Sin embargo, Trident y WebKit han agregado ganchos a través de pseudo-elementos.
Tridente
A partir de IE10, el botón de entrada de archivo se puede diseñar utilizando el pseudo-elemento ::-ms-browse . Básicamente, cualquier regla de CSS que apliques a un botón regular puede aplicarse al pseudo-elemento. Por ejemplo:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
<input type="file">
Esto se muestra como sigue en IE10 en Windows 8:
WebKit
WebKit proporciona un gancho para su botón de entrada de archivo con el pseudo-elemento ::-webkit-file-upload-button . Una vez más, se puede aplicar prácticamente cualquier regla de CSS, por lo que el ejemplo de Trident también funcionará aquí:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
<input type="file">
Esto se muestra de la siguiente manera en Chrome 26 en OS X:
Una solución realmente inteligente que usa jQuery que funciona en todos los navegadores antiguos, así como en los nuevos, que encontré here . Se encarga de todos los problemas de estilo y clic (), usando el botón de búsqueda de archivos real. Hice una versión simple de javascript: fiddle La solución es tan simple como la genialidad: haga invisible la entrada del archivo, y use un fragmento de código para colocarlo debajo del cursor del ratón.
<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;
}
css puede hacer mucho aquí ... con un poco de engaño ...
<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);
}
:: referencia :: http://site-o-matic.net/?viewpost=19
-abadía
siga estos pasos y luego puede crear estilos personalizados para su formulario de carga de archivos:
1.) este es el formulario html simple (lea los comentarios html que he escrito aquí a continuación)
<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.) luego use este sencillo script para pasar el evento de clic al archivo de la etiqueta de entrada.
function getFile(){
document.getElementById("upfile").click();
}
ahora puede usar cualquier tipo de estilo sin tener que preocuparse de cómo cambiar los estilos predeterminados. Lo sé muy bien, porque he estado intentando cambiar los estilos predeterminados durante un mes y medio. Créeme, es muy difícil porque los diferentes navegadores tienen diferentes etiquetas de entrada de carga. Por lo tanto, use este para crear sus formularios personalizados de carga de archivos. Aquí está el código completo de CARGA AUTOMÁTICA.
<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>
¡disfrutar!
Que tengas un buen día,
Actualiza Nevermind, esto no funciona en IE o es nuevo hermano, FF. Funciona en cualquier otro tipo de elemento como se espera, pero no funciona en entradas de archivos. Una forma mucho mejor de hacer esto es simplemente crear una entrada de archivo y una etiqueta que lo vincule. Haga que la entrada del archivo no muestre ninguna y esté en auge, funciona en IE9 + sin problemas.
Advertencia: ¡Todo por debajo de esto es una mierda!
Mediante el uso de pseudo elementos posicionados / dimensionados contra su contenedor, podemos sobrevivir con solo un archivo de entrada (sin necesidad de marcado adicional), y estilo como de costumbre.
<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;
}
¡Disfruten chicos!
Antigua actualización
Convirtió esto en un Stylin mixin. Debería ser lo suficientemente fácil para que uno de ustedes los gatos frescos de SCSS lo convierta.
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)
Uso:
<input type="file">
input[type="file"]
file-button(200px)
SOLO CSS
Usa este sencillo y FÁCIL.
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;
}
Como mencionaron y , puede usar el comportamiento de una etiqueta personalizable, ocultando el elemento de entrada de archivo menos flexible.
<!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>
En caso de que esté buscando una biblioteca javascript: una solución lista jquery-fileinput , jquery-fileinput funciona bien.
Estas respuestas son agradables y todas funcionan para casos de uso muy específicos. Es decir, son opinas.
Entonces, aquí hay una respuesta que no supone nada, pero funcionará sin importar cómo la modifiques. Puede cambiar el diseño con css, agregar javascript para tal vez mostrar un nombre de archivo en el cambio, etc., todavía funcionará.
Código:
Aquí está el núcleo 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%;
}
y el núcleo html:
<div class="file-input">
<input type="file"/>
</div>
Como puede ver, estamos obligando a que cualquier evento de puntero (clic) que ocurra en el elemento .file-input, o cualquiera de sus hijos, se dirija a la entrada del archivo. Esto se debe a que la entrada del archivo se posiciona de forma absoluta y siempre consumirá el ancho / alto del contenedor. Por lo tanto, puede personalizar para adaptarse a su necesidad. coloque el envoltorio en un botón, use algunos js para mostrar el nombre del archivo en la selección, etc. nada se romperá mientras el código del núcleo anterior permanezca intacto.
Como verá en la demostración, he agregado un spantexto con "Seleccionar archivo" y una clase con estilos adicionales para decorar el .file-inputdiv. Este debe ser el punto de partida canónico para cualquiera que tenga la intención de crear un elemento de carga de archivos personalizado.
Demo: JSFIDDLE
<label>
<input type="file" />
</label>
Puede envolver su tipo de entrada = "archivo" dentro de una etiqueta para la entrada. Diseñe la etiqueta como desee y oculte la entrada con display: none;
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
Normalmente utilizaría javascript simple para personalizar la etiqueta de entrada del archivo. Un campo de entrada oculto, al hacer clic en el botón, javascript llamar al campo oculto, una solución simple sin ningún css o montón de jquery.
<button id="file" onclick="$(''#file'').click()">Upload File</button>