Cómo quitar la sombra de una entrada de texto HTML

Escrito por tim searles | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo quitar la sombra de una entrada de texto HTML
Teclas de computadora. (computer image by blaine stiger from Fotolia.com)

Los campos de entrada de texto HTML se utilizan en formularios para recoger la información del usuario. Intrínsecamente incluyen sombras basadas en el navegador utilizado. Safari, por ejemplo, tiene el azul flotante alrededor del campo cuando se centra en el campo. El uso de CSS puede eliminar la sombra de los campos de entrada de texto y personalizarlos para ajustarse al diseño del sitio en general. La mayoría de las veces un desarrollador mantiene la sensación de campo, pero ocasionalmente un diseño gráfico es aplicado a un campo de texto. Una tarea como eliminar una sombra de texto no debería sacrificar la funcionalidad del elemento del formulario, sino mejorarlo.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre un editor de texto como Dreamweaver o BBEdit (ver la sección Recursos de este artículo) y crea un archivo HTML. Inserta un formulario HTML incluyendo al menos una entrada con type="text". Crea un archivo de hoja de estilo y nómbralo "main.css".

  2. 2

    Crea una clase CSS para los campos de entrada de texto. Dale un nombre que esté cerca de lo que será el estilo como "campos de texto". Este nombre de clase se encontrará en el archivo de hoja de estilo y contendrá la definición de estilo para los campos de texto.

  3. 3

    Define los atributos de la clase CSS. Estos son algunos ejemplos de atributos específicos que puedes tener que definir:

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

    Cambiar el atributo border es lo más importante para cambiar cualquier atributo de entrada de texto. Esto es por lo general lo que determina el sombreado alrededor de la caja de texto. Ajustar de relleno permite determinar la cantidad de espacio (en píxeles) del interior de la caja de texto. El tamaño de la fuente y el color te permiten determinar el tamaño y color del campo de entrada de texto. Agregar un fondo te permite personalizar tu campo de entrada de texto para combinar con el diseño de tu sitio web.

  4. 4

    Agrega la clase que has creado a cualquier entrada de texto que quieras estilizar. Sigue este formato:

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

    Utiliza la misma clase para cada campo de entrada de texto para que el mismo estilo sea aplicado igualmente en todos los campos de entrada de texto.

  5. 5

    Inserta tu archivo de hoja de estilo en tu archivo HTML dentro de la etiqueta <head>. Sigue este formato:

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

    Abre tu archivo HTML en el navegador web y observa los campos de entrada que has creado. Revisa el archivo de hoja de estilo como sea necesario para lograr el aspecto que desees.

Consejos y advertencias

  • Al crear clases CSS es importante establecer una convención de nomenclatura que cualquiera pueda seguir. Otra persona puede heredar el código y les ayudarás a seguir lo que estabas haciendo si dejas el proyecto.
  • Al utilizar fondos para campo de entrada de texto es mejor utilizar un fondo que no se pueda repetir y tenga una altura y ancho fijos que se ajusten a tu campo de texto.
  • Los navegadores modernos te permitirán estilizar campo de texto sin necesidad de utilizar una clase específica. El formato de este tipo de estilo sigue este formato: input[type=”text”] { inserta tus atributos de estilo aquí }.
  • A veces es mejor favorecer los estilos inherentes de formularios de tu navegador que crear estilos de formulario CSS porque los diferentes navegadores renderizan los elementos de los formularios de forma diferente. Puede que tengas que aplicar diferentes estilos basados ​​en el navegador que utilizas.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles