Estilizando um tipo de entrada = botão “arquivo” - html

No HTML, todo elemento é exibido como um item específico na página da web, como um botão, parágrafo, linha horizontal e muito mais. No entanto, também podemos aplicar estilos personalizados a esses elementos usando CSS. A maioria dos navegadores não altera a aparência dos elementos de entrada usando JavaScript ou CSS. Embora o estilo direto de um elemento de entrada seja difícil, o “”O elemento nos ajuda a estilizar as entradas.

Os resultados de aprendizado deste blog são:

• Como adicionar um elemento de tipo de arquivo de entrada em html?
• Como estilizar um tipo de entrada = botão "arquivo"?

Como adicionar um elemento de tipo de arquivo de entrada em html?

O elemento html com o “tipo”Atributo“arquivo”É utilizado para criar um elemento de entrada que aceita arquivos.

Vamos verificar se está funcionando primeiro.

Em html, adicione um “”Elemento e associe o“tipoAtributo como “arquivo”Para isso:

Saída

Como estilizar um tipo de entrada = botão "arquivo"?

O elemento com “tipo = arquivo”Vem com o estilo padrão. No exemplo abaixo, o html “”O elemento é utilizado para estilizar um botão de entrada“ type = arquivo ”.

No HTML, siga as etapas abaixo para criar uma página HTML:

• Adicione um “”Elemento junto com o“para”Atribua e atribua uma classe“estilo de arquivo”. O "para”O atributo é usado para acessar o“eu ia”Atributo.
• Dentro do elemento da etiqueta, adicione o “”Tag para incorporar a imagem e o“

  ”Tag para o parágrafo.

• O elemento "" é adicionado com os atributos "SRC" e "Width".
• O "src”Atributo contém o URL da imagem.
• O "largura”O atributo determina a largura da imagem:

Carregue a foto

Saída

Na próxima seção, as propriedades do CSS que vamos utilizar serão discutidas.

ID do estilo “arquivo”

#arquivo
Mostrar nenhum;

Para ocultar o elemento de arquivo de entrada comum, o “mostrar”A propriedade é definida como“nenhum”.

Saída

Estilo de etiqueta de estilo “estilo de arquivo”
Para acessar o elemento do rótulo, utilize o “.estilo de arquivoClasse e aplique o código fornecido abaixo:

.estilo de arquivo
Fonte-família: 'Trebuchet MS';
Largura: 400px;
exibição: bloco;
Background-Color: #f5f4f4;
margem: automático;
Cursor: Ponteiro;
Alinhamento de texto: centro;
preenchimento: 20px;
Radio de fronteira: 15px;
Border: 2px tracejado #cdc8c8;

No código acima mencionado, o “”É estilizado através das seguintes propriedades do CSS:

• ““família de fontes”Define o estilo da fonte.
• ““largura"Determina a largura do elemento" ".
• ““mostrar"Propriedade ajusta o layout do elemento" ". O valor que "bloquear”Vai levar a largura total.
• ““cor de fundo”Aplica a cor ao fundo do elemento.
• ““margem”A propriedade ajusta o espaço ao redor do elemento.
• ““cursor”Define o estilo do cursor do mouse como um“ponteiro”Ao apontar para o elemento.
• ““alinhamento de texto”Identifica o alinhamento do texto do elemento.
• ““preenchimento”Determina o espaço em torno do conteúdo do elemento.
• ““Radio de fronteira”Faz as bordas do elemento redondo.
• ““fronteira”Ajusta a fronteira do elemento, definindo os valores para a largura, estilo e cor da borda.

A imagem abaixo exibe a saída do código acima mencionado:

Estilo de estilo “estilo de arquivo” no mouse

.estilo de arquivo: hover
Background-Color: RGB (228, 213, 213);

O ":flutuar”É uma pseudo-classe que é utilizada para aplicar o efeito pairar no elemento. Em nosso cenário, quando o cursor do mouse aponta para o elemento, a cor de fundo do elemento será alterada.

Saída

Nós ensinamos a você como estilizar um tipo de entrada = “arquivo”Botão em html.

Conclusão

O html “”O elemento é utilizado para estilizar o elemento de entrada com o“tipo = arquivo" botão. A tag de etiqueta define o “para”Atributo que é usado para acessar o“eu ia”Atributo da tag de entrada. Depois disso, as propriedades do CSS, como borda, cor de fundo, cursor, preenchimento e muito mais, podem ser utilizadas para estilizar o botão de entrada "type = arquivo". Este blog guiado relacionado ao estilo de um tipo de entrada = “arquivo" botão.