Skip to main content
adicionou 1125 caracteres ao conteúdo
Fonte Link
cHida
  • 416
  • 2
  • 7

Olá só com CSS você não irá conseguir. Eu montei uma forma simples de fazer o que você quer com jQuery e CSS https://jsfiddle.net/4oz8znv9/2/

$(function(){
    $('#upload').on('change',function(){
        var numArquivos = $(this).get(0).files.length;
        if ( numArquivos > 1 ) {
            $('#texto').val( numArquivos+' arquivos selecionados' );
        } else {
            $('#texto').val( $(this).val() );
        }
    });
});
#teste { position:relative; }
#upload { position:absolute; top:0;left:0; border:1px solid #ff0000; opacity:0.01; z-index:1; }
#texto { border:0px; background:#dedede; border-radius:4px; padding:5px; }
#botao { border:1px solid #dedede; background:#989898; color:#ffffff; border-radius:4px; padding:5px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="teste">
    <input type="file" multiple="multiple" id="upload" />
    <input type="text" id="texto" />
    <input type="button" id="botao" value="Enviar" />
</div>

Att.

Olá só com CSS você não irá conseguir. Eu montei uma forma simples de fazer o que você quer com jQuery e CSS https://jsfiddle.net/4oz8znv9/2/

Att.

Olá só com CSS você não irá conseguir. Eu montei uma forma simples de fazer o que você quer com jQuery e CSS https://jsfiddle.net/4oz8znv9/2/

$(function(){
    $('#upload').on('change',function(){
        var numArquivos = $(this).get(0).files.length;
        if ( numArquivos > 1 ) {
            $('#texto').val( numArquivos+' arquivos selecionados' );
        } else {
            $('#texto').val( $(this).val() );
        }
    });
});
#teste { position:relative; }
#upload { position:absolute; top:0;left:0; border:1px solid #ff0000; opacity:0.01; z-index:1; }
#texto { border:0px; background:#dedede; border-radius:4px; padding:5px; }
#botao { border:1px solid #dedede; background:#989898; color:#ffffff; border-radius:4px; padding:5px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="teste">
    <input type="file" multiple="multiple" id="upload" />
    <input type="text" id="texto" />
    <input type="button" id="botao" value="Enviar" />
</div>

Att.

Fonte Link
cHida
  • 416
  • 2
  • 7

Olá só com CSS você não irá conseguir. Eu montei uma forma simples de fazer o que você quer com jQuery e CSS https://jsfiddle.net/4oz8znv9/2/

Att.