Como definir o estilo do botão de upload de arquivo "Pesquisar computador" para o Formulário de contato 7 por e-mail?
htmlnoob1
VALORES PADRÃO Eu tenho um "Formulário de Contato 7" padrão Enviar Arquivo como Formulário de Anexo no wordpress.
<label>UPLOAD FILE
[file uploadedfile]
</label>
Já fui pesquisado stackoverflow etc etc etc. Após 2 horas, desisti :(
Como posso alterar a cor do fundo e o tamanho da fonte facilmente?
Se eu entrar em contato com o controle de formulário de arquivo diretamente, ele explodirá como um gigante. Isso não é útil para computadores e nunca responsiv für mobile.
E como uma segunda pergunta.
É possível formatar "Nenhum arquivo selecionado" de forma diferente de "Pesquisar no computador (Durchsuchen)"?
Muito obrigado
o htmlnoob
Austin
Embora seja difícil definir o estilo de uma entrada de arquivo devido à compatibilidade do navegador, você pode aplicar um estilo a seu rótulo para obter o mesmo resultado.
Dê uma olhada neste exemplo de entrada:
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
Como o rótulo está diretamente vinculado à entrada, ele abrirá o navegador de arquivos assim que você clicar no rótulo ou na entrada. Sendo esse o caso, você pode ocultar a própria entrada e exibir apenas o rótulo.
<style>
input[type="file"] {
display: none;
}
</style>
Agora que você ficou apenas com o rótulo, pode aplicar um estilo ao elemento para torná-lo mais parecido com um botão em vez de um rótulo. Dê uma olhada neste exemplo básico de CSS que você pode usar para definir o estilo do rótulo.
<style>
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
Aqui está o que você conseguirá depois de ocultar a entrada e adicionar um estilo ao rótulo. Claro, este é apenas um exemplo básico, mas quase não há limites para o que você pode conseguir por meio de CSS, então você pode estilizar o rótulo da maneira que quiser.
Juntando tudo, o código final para esta implementação será parecido com o seguinte:
input[type="file"] {
display: none;
}
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<!doctype html>
<html>
<head>
<title>File upload styling</title>
</head>
<body>
<form method="post">
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
</form>
</body>
</html>Como você está usando o WordPress, acabará colocando CSS nos estilos de seu tema, mas a implementação deve ser quase idêntica ao que seria com um site HTML estático.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
editar em
Artigos relacionados
TOP lista
- 1
Modbus Python Schneider PM5300
- 2
Como usar HttpClient com TODO O certificado SSL, não importa como "ruim" é
- 3
Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset
- 4
Formatar código como um bloco de código em R Markdown
- 5
debian 8: comando deb não encontrado. Como posso corrigir isso?
- 6
how can i turn off the debug view in electron?i cant find any about it using google
- 7
Setas rotuladas horizontais apontando para uma linha vertical
- 8
Como obter a entrada de trás de diálogo em treeview pyqt5 python 3
- 9
O material angular não carrega os estilos corretamente
- 10
Problema de escalada que requer programação dinâmica
- 11
Why isn't my C# .Net Core Rest API route finding my method?
- 12
Uma pilha LAMJ é um ambiente possível?
- 13
WooCommerce obtém a quantidade do pedido na página de agradecimento e redireciona
- 14
Como recuperar parâmetros de entrada usando C #?
- 15
iterar sobre a matriz JSON em reagente nativo
- 16
Curved lines using border
- 17
Java thread.sleep (1) dormindo por mais de 1 ms
- 18
HTML & amp; maiúsculas e Minúsculas
- 19
regex para destacar novos caracteres de linha no início e no fim
- 20
Erros de conexão Mysql
- 21
Jackson, java.time, ISO 8601, serialize sem milissegundos
deixe-me dizer algumas palavras