Atributos do botão "Input" para o CSS Firefox

Escrito por ashley poland Google | Traduzido por cezar rosa
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Atributos do botão "Input" para o CSS Firefox
Sem formatação, formulários são projetados para serem genéricos (Comstock/Comstock/Getty Images)

Botões são um tipo de entrada em formulários HTML. Os HTML para formulários e botões de entrada são suportados em todos os principais navegadores, incluindo o Mozilla Firefox. Se a aparência padrão para os botões não se encaixar com o design do seu site, modifique-a usando o CSS.

Outras pessoas estão lendo

Firefox, botões e CSS

O comportamento dos botões no Firefox é quase idêntico ao dos botões em qualquer navegador, a única verdadeira diferença é que o valor padrão do botão "Submit" (Enviar) é "Enviar Consulta", em vez de apenas "Enviar". O Firefox sempre foi bem comprometido com os padrões da Web. Desde 2011 a versão mais recente do Firefox suporta a maioria das regras CSS3 e quase todos os elementos anteriores do CSS, denominando um botão de entrada com HTML. A maioria das regras CSS que você usa para criar seus botões funcionará no Firefox.

Opções do botão

Há mais de um tipo de botão para a opção "Input" (Entrada). Há o genérico "Button" (Botão), o botão de envio "Submit" e o botão de reinicialização "Reset". Como você deve definir a ação padrão de um botão genérico, o botão "Submit" envia os dados do formulário, enquanto o botão de "Reset" os apaga. Usando o HTML básico você pode alterar o valor do botão -- isto é, aquilo que ele diz. Por exemplo, para definir um botão "Submit" que diz "Enviar", o HTML seria:

<input type="submit" value="Send" />

Aparência padrão do botão

Sem estilo CSS, o botão aparecerá subindo na página em um efeito 3D básico, com um fundo cinza e o texto preto. Os botões serão ampliados em largura para que o valor caiba e usarão a fonte genérica "sans serif" com aproximadamente 12 pixels de altura, mas isso pode variar de acordo com as configurações de fonte do navegador. Quando selecionado, o botão aparecerá pressionado.

Modificação CSS

Você pode usar praticamente qualquer regra CSS para alterar a aparência do botão. Cores, tamanho, fonte e até mesmo a posição dele na página podem ser modificados com o CSS. O botão mantém a aparência 3D a menos que você altere a borda. Se mudar a borda pelo CSS, o botão ficará plano. Se quiser fazer com que cada botão tenha uma aparência uniforme, como, por exemplo, cor de fundo preta e texto branco, você pode mudar o elemento "Input" na folha de estilo:

input { background: #000000; color: #FFFFFF;}

No entanto, isso afeta todos elementos "Input" na página, incluindo áreas de texto e caixas de seleção. Para especificar melhor, sugere-se criar uma classe e aplicá-la para cada botão, como, por exemplo: "<input type="button" class="button" value="Press Here" />" com a classe:

.button { background: #000000; color: #FFFFFF;}

A terceira opção é adicionar um atributo "Style" para a etiqueta HTML. Digamos que você tenha um formulário dentro de um elemento "div" e gostaria que o botão "Submit" ficasse à direita e o botão de restauro à esquerda. Você poderia usar o "Style" dentro da "tag", como em:

<input type="reset" value="Clear" style="float:left;"> <input type="submit" value="Send" style="float:right;">

O único problema que você pode encontrar no Firefox é ao usar o atributo "Text-Align" (Alinhar Texto), que move o texto do botão para um determinado ponto. Por padrão, o Firefox centraliza o valor do botão e o CSS não consegue mudar esse comportamento.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível