Como remover a sombra de entrada de texto do HTML

Escrito por tim searles | Traduzido por erica priscila de souza
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como remover a sombra de entrada de texto do HTML
Teclas de computador (computer image by blaine stiger from Fotolia.com)

As caixas de entrada de texto HTML são usadas em formulários para coletar informações do usuário. Inerentemente incluem sombras baseadas no navegador que você usa. O Safari, por exemplo, tem o foco em azul ao redor da caixa. Usando o CSS, podemos remover a sombra de caixas de texto de entrada e personalizá-las para ajustar o design global do site. Na maioria das vezes, um desenvolvedor vai manter a sensação de caixa, mas ocasionalmente, um design gráfico será aplicado a uma caixa de texto. Uma tarefa como remover uma sombra de texto não deve sacrificar a funcionalidade da forma do elemento, mas melhorá-lo.

Outras pessoas estão lendo

Instruções

  1. 1

    Abra um editor de texto como o Dreamweaver ou BBEdit (consulte Resources) e crie um arquivo HTML. Insira um formulário HTML, incluindo, pelo menos, uma entrada com "type="text"". Crie um arquivo de folha de estilo e o nome "principal.css".

  2. 2

    Crie uma classe CSS para caixas de texto de entrada. Dê um nome próximo ao que será o estilo como "caixasdetexto". O nome desta classe ficará no seu arquivo de folha de estilo e manterá a definição de estilo para suas caixas de texto.

  3. 3

    Defina os atributos de sua classe CSS. Aqui estão alguns exemplos de atributos específicos, que você pode ter que definir:

    border: 1px solid #000000; font-size: 14px; color: #333333; padding: 5px 5px 5px 5px; background: url(“images/minhacaixa.jpg”) 0 0 no-repeat; width: 300px; position: relative; float: left;

    Alterar o atributo border (borda) é a mudança mais importante para qualquer atributo de entrada de texto. Isto, normalmente, é o que determina o sombreamento ao redor da caixa de texto. Ajustar o padding (espaçamento), permite que você determine a quantidade de espaço (em pixels) de dentro da caixa de texto. Font size (tamanho da fonte) e color (cor) permitem que você determine o tamanho do texto e a cor na caixa de entrada. Adicionar um background (plano de fundo) permite que você personalize sua caixa de entrada de texto para acompanhar o design do seu site.

  4. 4

    Adicione a classe que você criou em qualquer entrada de texto, no estilo que você queira. Siga este formato:

    <input type=”text” name=”mytextbox” class=”textboxes” value=”test” />

    Use a mesma classe para cada caixa de entrada de texto, para que o mesmo estilo seja aplicado igualmente em todos eles.

  5. 5

    Insira seu arquivo de estilo de folha em seu arquivo HTML dentro da etiqueta <head>. Siga este formato:

    <link rel=”stylesheet” href=”main.css” type=”text/css” />

    Abra o arquivo HTML em um navegador da web e exiba as caixas de entrada que você criou. Revise o arquivo de folha de estilos, conforme necessário, para alcançar a aparência desejada.

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