30

Tenho essa estrutura:

<section id="cadastro" class="cadastroVersao pg-i">
    <div class="titulo">
            <h1><i class="icon-clientes"></i>Cadastro de versão</h1>
    <a href="<?php echo base_url() ?>cadastro"><i class="icon-novo-principal"></i>Novo Cadastro</a>

    </div>
    <div class="conteudoSection">
        <ul>
            <li class="novoCliente">
                    <h3>Página #01</h3>

                <?php if(isset($retorno_cliente)) { echo $retorno_cliente; } ?>
                <form class="formVersoes" method="post" action="<?php echo base_url() ?>cadastro">
                    <input type="file" placeholder="Upload versão XL" name="cliente" required="required">
                    <button type="submit" name="cadastro">Upload</button>
                    <input type="file" placeholder="Upload versão L" name="cliente" required="required">
                    <button type="submit" name="cadastro">Upload</button>
                    <input type="file" placeholder="Upload versão M" name="cliente" required="required">
                    <button type="submit" name="cadastro">Upload</button>
                    <input type="file" placeholder="Upload versão S" name="cliente" required="required">
                    <button type="submit" name="cadastro">Upload</button>
                    <input type="text" placeholder="Título da página" name="cliente" required="required">
                    <button type="submit" name="cadastro">Cadastrar</button>
                </form>
            </li>
        </ul>
    </div>
</section>

Gostaria de deixá-la como na imagem abaixo: Como deveria ser

Mas só consigo deixar assim: Mas consigo deixar apenas assim:

Estou usando Less para estilizar, mas colei todo o CSS compilado da página aqui:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:500,800,300');
/*==============================================================
=            das variaveis, funções, reset e icones            =
==============================================================*/
/*ICONES / FONTE*/
i {
  height: 20px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  -webkit-transition: all 400ms;
  -moz-transition: all 400ms;
  transition: all 400ms;
}
i.icon-editarPerfil {
  background: url('../images/sprite.png') -1px 188px;
}
i.icon-editarPerfil:hover {
  background: url('../images/sprite.png') 21px 188px;
}
i.icon-novo-principal {
  background: url('../images/sprite.png') -1px 62px;
}
i.icon-novo-cadastro {
  background: url('../images/sprite.png') -1px 167px;
}
i.icon-logout {
  background: url('../images/sprite.png') -1px 209px;
}
i.icon-logout:hover {
  background: url('../images/sprite.png') 21px 209px;
}
i.icon-notificacoes {
  background: url('../images/sprite.png') -1px 146px;
}
i.icon-clientes {
  background: url('../images/sprite.png') -1px 167px;
}
i.icon-search {
  background: url('../images/sprite.png') -1px 83px;
}
i.icon-search:hover {
  background: url('../images/sprite.png') 21px 83px;
}
i.icon-voltar {
  background: url('../images/sprite.png') -1px 20px;
}
/*variaveis*/
/*reseta as propriedades básicas*/
* {
  margin: 0;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  height: auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
}
/*base para responsividade*/
/*100% da @larguraBody*/
/*estilo dos cards*/
/*calcula o tamanho de cada elemento em porcentagem*/
/*Explicação da função abaixo:*/
/*@l1 refere-se ao objeto que você deseja calcular a largura em %*/
/*@l2 refere-se a largura em px do container em que @l1 se encontra*/
/*Valor padrão: 10% de 1000px = 100px*/
/*calcula o valor da margin para que seja usado juntamenta com a função .gridCalc*/
/*Auxiliares - Efeitos*/
/*Formulários*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    background-image: url('../images/v.png');
    background-position: right 15px top 50%;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 15px;
    border: 1px solid #eeeeee;
  }
}
/*Avisos para o usuário*/
/*=====  End of das variaveis, funções, reset e icones  ======*/
body {
  background: url('../images/bg2.jpg') fixed;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  overflow-x: hidden;
}
.login {
  padding: 20px;
  background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  width: 300px;
  height: 320px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.login img {
  width: 228px;
  height: auto;
}
.login input {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ccc;
  color: #b2b2b2;
  background: none;
  margin-top: 40px;
}
.login button {
  margin: 40px 0 20px 0;
  width: 170px;
  height: 40px;
  line-height: 40px;
  border: 0;
  background: #b7d47a;
  color: #ffffff;
  cursor: pointer;
}
.login button:hover {
  background: #a9c76b;
}
.login p.ok {
  color: #fff;
  margin-top: 15px;
  padding: 10px;
  background: #b7d47a;
  width: 260px;
  position: fixed;
  top: 0;
}
.login p.unok {
  color: #fff;
  margin-top: 15px;
  padding: 10px;
  background: #b7d47a;
  width: 260px;
  position: fixed;
  top: 0;
  background: #a02222;
}
.pg {
  width: 100%;
  padding: 80px 20px;
}
.pg aside {
  width: 23.66071429%;
  margin-right: 1.78571429%;
  display: inline-block;
  float: left;
}
.pg aside #breadVoltar {
  margin-bottom: 20px;
  padding: 10px;
  background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  background: #b7d47a;
  display: inline-block;
}
.pg aside #breadVoltar a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}
.pg aside #breadVoltar a:hover {
  text-decoration: underline;
}
.pg aside #breadVoltar:hover {
  background: #a9c76b;
}
.pg aside #perfil {
  padding: 0 0 20px 0;
  background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  position: relative;
}
.pg aside #perfil .capa {
  width: 100%;
}
.pg aside #perfil .fotoPerfil {
  width: 90px;
  height: 90px;
  display: inline-block;
  position: relative;
  bottom: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid #ccc;
}
.pg aside #perfil .editarPerfil {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  bottom: 80px;
  margin-left: 20px;
}
.pg aside #perfil .logout {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  bottom: 100px;
  right: 20px;
  float: right;
}
.pg aside #perfil div {
  position: absolute;
  width: 100%;
  text-align: center;
}
.pg aside #perfil .user {
  color: #b2b2b2;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  line-height: 25px;
  clear: both;
  padding: 0 20px;
  margin-top: 50px;
}
.pg aside #perfil .user strong {
  color: #0b1232;
  font-size: 16px;
  line-height: 18px;
}
.pg aside #logo {
  text-align: center;
  margin-top: 20px;
}
.pg main {
  width: 74.55357143%;
  display: inline-block;
  float: right;
}
.pg main .titulo {
  display: block;
}
.pg main .titulo a {
  padding: 10px;
  display: inline-block;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 16px;
  vertical-align: middle;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.49);
}
.pg main .titulo a:hover {
  text-decoration: underline;
}
.pg main h1 {
  padding: 10px;
  background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  display: inline-block;
  margin-bottom: 20px;
  color: #173845;
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
  text-transform: uppercase;
}
.pg main .conteudoSection {
  width: 79.64071856%;
  padding: 20px 20px;
  background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  background: #ffffff;
  display: inline-block;
  margin-bottom: 100px;
}
.pg main .conteudoSection h3 {
  color: #173845;
  font-weight: 500;
  font-size: 30px;
  clear: both;
  margin-top: 40px;
}
.pg main .conteudoSection h3:first-child {
  margin-top: 0;
}
.pg main .conteudoSection ul {
  padding: 0;
}
.pg main .conteudoSection li {
  list-style: none;
}
.pg main .conteudoSection div.clientes {
  float: left;
}
.pg main .totaisSection {
  width: 20.35928144%;
  padding: 20px;
  background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  background: #b7d47a;
  color: #ffffff;
  display: inline-block;
  float: right;
  text-align: center;
}
.pg main .totaisSection .qtdComentarios {
  font-size: 40px;
}
.pg-i .conteudoSection {
  width: 100% !important;
}
#cadastro ul {
  margin-bottom: 40px;
}
#cadastro ul:last-child {
  margin-bottom: 0;
}
#cadastro ul p.ok {
  color: #fff;
  margin-top: 15px;
  padding: 10px;
  background: #b7d47a;
  position: fixed;
  top: 0;
  width: 260px;
  margin-bottom: 10px;
  position: relative;
}
#cadastro ul p.unok {
  color: #fff;
  margin-top: 15px;
  padding: 10px;
  background: #b7d47a;
  width: 260px;
  position: fixed;
  top: 0;
  background: #a02222;
  position: relative;
  margin-bottom: 10px;
}
#cadastro ul li {
  display: block;
  font-size: 0;
}
#cadastro ul li input {
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  padding: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#cadastro ul li select {
  background-image: url('../images/v.png');
  background-position: right 15px top 50%;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 15px;
  border: 1px solid #eeeeee;
}
#cadastro ul li select option:first-child {
  color: #CCC;
}
#cadastro ul li button {
  border-style: solid;
  border-width: 1px;
  border-color: #3a5a85;
  background-image: -moz-linear-gradient(90deg, #4e6f9b 0%, #5b7dab 100%);
  background-image: -webkit-linear-gradient(90deg, #4e6f9b 0%, #5b7dab 100%);
  background-image: -ms-linear-gradient(90deg, #4e6f9b 0%, #5b7dab 100%);
  color: #ffffff;
  cursor: pointer;
  padding: 15px;
  -webkit-transition: all 400ms;
  -moz-transition: all 400ms;
  transition: all 400ms;
  width: 18.86792453%;
}
#cadastro ul li button:hover {
  opacity: 0.7;
}
#cadastro ul .novoCliente input {
  width: 77.35849057%;
  margin-right: 2.51572327%;
}
#cadastro ul .novoProjeto input {
  width: 100%;
  margin-bottom: 20px;
}
#cadastro ul .novoProjeto select {
  width: 77.35849057%;
  margin-right: 2.51572327%;
}
#cadastro ul .novaVersao input {
  width: 100%;
  margin-bottom: 20px;
}
#cadastro ul .novaVersao select {
  width: 77.35849057%;
  margin-right: 2.51572327%;
}
#cadastro ul .editarPerfil input {
  width: 100%;
  margin-bottom: 20px;
}
#cadastro ul .editarPerfil input.senha {
  width: 77.35849057%;
  margin-right: 2.51572327%;
}
#cadastro-versao input {
  margin-bottom: 20px;
}
#notificacoes ul {
  padding: 0;
}
#notificacoes ul li {
  list-style: none;
  display: inline-block;
  margin: 0 16px 20px 0;
  -webkit-transition: all 400ms;
  -moz-transition: all 400ms;
  transition: all 400ms;
}
#notificacoes ul li:hover {
  opacity: 0.7;
}
#notificacoes ul li span,
#notificacoes ul li h3 {
  background-color: #173845;
  padding: 10px;
  display: inline-block;
  color: #ffffff;
  margin: 0;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  height: auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
}
#notificacoes ul li h3 {
  background: #3d5d89;
  text-transform: uppercase;
}
#clientes .conteudoSection {
  padding: 20px 0 20px 20px;
  background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
  position: relative;
}
#clientes .conteudoSection .searchClientes {
  display: block;
  height: 20px;
  width: 240px;
  display: inline-block;
  float: right;
  position: absolute;
  right: 10px;
}
#clientes .conteudoSection .searchClientes input {
  border: 0;
  border-bottom: 1px solid #ccc;
  width: 60px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  float: right;
  padding: 3px;
}
#clientes .conteudoSection .searchClientes input:focus {
  width: 200px;
  border-bottom: 1px solid #173845;
}
#clientes .conteudoSection .searchClientes i {
  float: right;
}
#clientes .conteudoSection .listagemClientes h3 {
  margin-top: 20px;
}
#clientes .conteudoSection .listagemClientes li:first-child h3 {
  margin-top: 0;
}
#clientes .conteudoSection .listagemClientes a {
  display: inline-block;
  width: 29.32330827%;
  margin-right: 3.0075188%;
  margin-bottom: 20px;
  text-decoration: none;
  vertical-align: top;
  position: relative;
}
#clientes .conteudoSection .listagemClientes a img {
  width: 100%;
  height: auto;
}
#clientes .conteudoSection .listagemClientes a span {
  margin-top: -4px;
  padding: 5px;
  background: #173845;
  color: #ffffff;
  display: block;
}
#clientes .conteudoSection .listagemClientes a span.deletarCliente {
  padding: 5px 10px;
  position: absolute;
  top: 4px;
  right: 0;
  display: none;
}
/*=======================================
=            Responsividade           =
=======================================*/
/*----------  940PX  ----------*/
/*----------  850PX  ----------*/
@media (max-width: 850px) {
  #notificacoes ul li span,
  #notificacoes ul li h3 {
    padding: 6px;
  }
  #perfil .fotoPerfil {
    height: 70px;
    width: 70px;
    bottom: 40px;
  }
  #perfil .editarPerfil {
    bottom: 70px;
  }
  #perfil .logout {
    bottom: 90px;
  }
  main .conteudoSection {
    width: 100%;
  }
  main .totaisSection {
    width: 100%;
  }
  main .totaisSection p {
    display: inline-block;
  }
  main .totaisSection .qtdComentarios {
    margin: 0 5px;
    font-size: 26px;
  }
}
/*----------  790px  ----------*/
@media (max-width: 790px) {
  .pg main .totaisSection {
    padding: 10px;
  }
}
/*----------  710PX  ----------*/
@media (max-width: 710px) {
  .pg {
    padding: 50px 10px;
  }
  .pg aside {
    width: 100%;
  }
  .pg aside #perfil {
    text-align: left;
    height: 122px;
  }
  .pg aside #perfil .capa {
    width: 205px;
  }
  .pg aside #perfil .fotoPerfil {
    height: 50px;
    width: 50px;
    bottom: 106px;
    left: 225px;
  }
  .pg aside #perfil .editarPerfil {
    bottom: 102px;
    left: 276px;
  }
  .pg aside #perfil .logout {
    bottom: 122px;
    left: 336px;
    float: left;
  }
  .pg aside #perfil div {
    position: inherit;
    width: 100%;
    display: block;
    text-align: left;
  }
  .pg aside #perfil .user {
    text-align: left;
    position: relative;
    top: -190px;
    left: 275px;
    margin-top: 0;
  }
  .pg aside #logo {
    display: none;
  }
  .pg main {
    margin-top: -60px;
    width: 100%;
  }
  .pg main .conteudoSection {
    margin-bottom: 40px;
    width: 100%;
  }
  .pg main .totaisSection {
    width: 100%;
  }
}
/*----------  550PX  ----------*/
@media (max-width: 550px) {
  .pg aside #perfil .fotoPerfil {
    bottom: 106px;
    left: 180px;
  }
  .pg aside #perfil .editarPerfil {
    bottom: 102px;
    left: 230px;
  }
  .pg aside #perfil .logout {
    bottom: 122px;
    left: 290px;
  }
  .pg aside #perfil .user {
    top: -190px;
    left: 230px;
  }
  #cadastro ul li button {
    width: 33.867925%;
    padding: 15px 5px;
  }
  #cadastro ul .novoCliente input {
    width: 61.358491%;
  }
  #cadastro ul .novoProjeto select {
    width: 61.358491%;
  }
  #cadastro ul .novaVersao select {
    width: 61.358491%;
  }
  #cadastro ul .editarPerfil input.senha {
    width: 100%;
  }
  #cadastro ul .editarPerfil button {
    width: 150px;
  }
}
/*----------  500PX  ----------*/
@media (max-width: 500px) {
  .pg aside #perfil .fotoPerfil {
    bottom: 116px;
    left: 12px;
    width: 40px;
    height: 40px;
  }
  .pg aside #perfil .editarPerfil,
  .pg aside #perfil .logout {
    background: #fff;
    height: 25px;
    width: 25px;
    border-radius: 3px;
  }
  .pg aside #perfil .editarPerfil {
    bottom: 115px;
    left: 0px;
  }
  .pg aside #perfil .logout {
    bottom: 105px;
    left: 20px;
  }
  .pg aside #perfil .logout i,
  .pg aside #perfil .editarPerfil i {
    margin: 3px;
  }
  .pg aside #perfil .user {
    padding: 7px 7px 0 7px;
    background-image: -moz-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
    background-image: -webkit-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
    background-image: -ms-linear-gradient(90deg, #f3f3f3 0%, #ffffff 100%);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.41);
    top: -180px;
    left: 40px;
    max-width: 200px;
    display: inline-block;
    border-radius: 3px;
  }
  .pg aside #perfil .capa {
    width: 100%;
    height: 122px;
  }
}
/*----------  480PX  ----------*/
@media (max-width: 480px) {
  .listagemClientes ul li a {
    width: 45% !important;
  }
}
/*=====  End of Responsividade ======*/

Enfim, tem alguma maneira de estilizar esse campo input type file? Caso não exista com CSS, seria possível com jQuery?

4 Respostas 4

66

Muitos dos tutoriais encontrados pela internet sugerem a técnica de fake div, no qual o seletor de arquivo é ocultado com um display:none e então é criado um div com a aparência que gostaria. O lado ruim é que toda programação deve ser feita com Javascript para o div ter o mesmo comportamento de um input de arquivos.

Uma técnica mais simples e que utiliza somente HTML com CSS consiste em apontar o atributo for de um label para o input de seleção de arquivo (que estará oculto). Quando o usuário clicar no label, será como clicar no input de arquivo. Um exemplo:

/* Esconde o input */
input[type='file'] {
  display: none
}

/* Aparência que terá o seletor de arquivo */
label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
  padding: 6px 20px
}
<label for='selecao-arquivo'>Selecionar um arquivo &#187;</label>
<input id='selecao-arquivo' type='file'>


Se ainda quiser mostrar o nome do arquivo selecionado, terá que utilizar um pouco de Javascript para obter o value do seletor de arquivo. Eis um exemplo:

var $input    = document.getElementById('input-file'),
    $fileName = document.getElementById('file-name');

$input.addEventListener('change', function(){
  $fileName.textContent = this.value;
});
input[type='file'] {
  display: none
}

.input-wrapper label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  margin: 10px;
  padding: 6px 20px
}

.input-wrapper label:hover {
  background-color: #2980b9
}
<div class='input-wrapper'>
  <label for='input-file'>
    Selecionar um arquivo
  </label>
  <input id='input-file' type='file' value='' />
  <span id='file-name'></span>
</div>

Com essas duas informações você pode começar a estilizar o input='file' do jeito que mostrou nas imagens.

Good luck! :)

8
  • 3
    Bonito isso, não conhecia essa técnica. Vou adotá-la imediatamente +1 Commented 2/01/2017 às 15:32
  • utiliza o after dele também dá ;) Commented 12/01/2017 às 12:59
  • 1
    @MuriloGambôa pode dar um exemplo? Pelo que sei after e before são renderizados dentro do container, ou seja, em elementos que não possuem tag de fechamento (input, img, br...) é impossível usando somente css. Commented 12/01/2017 às 13:17
  • na label poxa :3 Commented 12/01/2017 às 13:20
  • Ainda não entendi sua sugestão, poderia fornecer uma resposta para a pergunta? Quanto mais alternativas, melhor. :D Commented 12/01/2017 às 13:31
10

$('.btn').on('click', function() {
  $('.arquivo').trigger('click');
});

$('.arquivo').on('change', function() {
  var fileName = $(this)[0].files[0].name;
  $('#file').val(fileName);
});
.arquivo {
  display: none;
}
.file {
  line-height: 30px;
  height: 30px;
  border: 1px solid #A7A7A7;
  padding: 5px;
  box-sizing: border-box;
  font-size: 15px;
  vertical-align: middle;
  width: 300px;
}
.btn {
  border: none;
  box-sizing: border-box;
  padding: 2px 10px;
  background-color: #4493c7;
  color: #FFF;
  height: 32px;
  font-size: 15px;
  vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="arquivo" id="arquivo" class="arquivo">
<input type="text" name="file" id="file" class="file" placeholder="Arquivo" readonly="readonly">
<input type="button" class="btn" value="SELECIONAR">

7

Para este tipo de situação, na verdade, este campo (file) é oculto, sendo acionado o evento change para preenchimento dos demais componentes, que vai exibir o nome do arquivo ou até a ação do upload.

Exemplo:

/*
Using the file input itself to select a file works fine
*/
$('input[name=file]').change(function() {
   alert($(this).val()); 
});


/*
However, using another element to trigger the file selector 
does not cause the "change" function to be triggered.
*/
$('a').click(function() {
    $('input[name=file]').click();
});
a {background-color: yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="file" type="file" />
<a>Trigger upload externally</a>

Existe uns exemplos muito legais AQUI (por tympanus.net)

0
-1

Esta seria a melhor resposta para suas perguntas e as futuras dúvidas dos outros que passarem por aqui, assim como eu...

<style>
  input, label {
   display: block;
  }

  input[type=file]::-webkit-file-upload-button {
    border: 1px solid grey;
    background: #FFFAAA;
  }
</style>
<form>
 <label for="fileUpload">Upload file</label><br>
 <input type="file" id="fileUpload">
</form>

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-file-upload-button

2
  • 3
    Por que seria a melhor? E ela não funciona apenas nos navegadores webkit? E nos outros, como ficaria?
    – Woss
    Commented 24/06/2019 às 19:10
  • 1
    Caro Marcos, infelizmente não é padronizado, não tem previsão nem de implementarem e também não tem alternativas especificas com vendores diferentes, logo só funcionará em Chromes e Safaris, outra questão é que isto estiliza o "botão" e não o input em si. Adicionar block em tudo também não faz muito sentido, provavelmente faça no seu caso específicos, mas para outras pessoas que copiarem o código como está provavelmente irão quebrar seus layouts.
    – Syzoth
    Commented 24/06/2019 às 19:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .