Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS formulario


El aspecto de un formulario HTML puede ser mejorado con CSS:

Inténtalo tú mismo "

El estilo de los campos de entrada

Utilice la width propiedad para determinar la anchura del campo de entrada:

Ejemplo

input {
    width: 100%;
}
Inténtalo tú mismo "

El ejemplo anterior se aplica a todos los <input> elementos. Si sólo desea el estilo de un tipo específico de entrada, puede utilizar selectores de atributos:

  • input[type=text] - sólo seleccionará los campos de texto
  • input[type=password] - sólo seleccionará los campos de contraseña
  • input[type=number] - sólo seleccionará los campos de números
  • etc ..

Entradas acolchados

Utilizar el padding la propiedad para agregar espacio dentro del campo de texto.

Consejo: Cuando se tienen muchas entradas después de la otra, es posible que también desee añadir un poco de margin , para añadir más espacio fuera de ellos:

Ejemplo

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
Inténtalo tú mismo "
Nota Tenga en cuenta que nos hemos fijado el box-sizing a la propiedad border-box . Esto asegura que las fronteras de relleno y, eventualmente, se incluyen en la anchura total y la altura de los elementos.
Lea más sobre el box-sizing propiedad en nuestra CSS3 caja de medición capítulo.

Entradas confinado

Utilice la border propiedad para cambiar el tamaño y color del borde, y el uso de la border-radius propiedad para añadir esquinas redondeadas:

Ejemplo

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}
Inténtalo tú mismo "

Si sólo desea un borde inferior, utilice el border-bottom propiedad:

Ejemplo

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
Inténtalo tú mismo "

Entradas de colores

Utilice el background-color propiedad para añadir un color de fondo a la entrada, y el color propiedad para cambiar el color del texto:

Ejemplo

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}
Inténtalo tú mismo "

Entradas enfocadas

Por defecto, algunos navegadores añadir un contorno azul alrededor de la entrada cuando se pone foco (clic en). Puede eliminar este comportamiento mediante la adición de outline: none; a la entrada.

Utilice el :focus selector de hacer algo con el campo de entrada cuando se obtiene foco:

Ejemplo

input[type=text]:focus {
    background-color: lightblue;
}
Inténtalo tú mismo "

Ejemplo

input[type=text]:focus {
    border: 3px solid #555;
}
Inténtalo tú mismo "

Entrada icono / imagen con

Si quieres un icono dentro de la entrada, utilice la background-image propiedad y posicionarlo con el background-position propiedad. También notamos que añadimos un gran relleno a la izquierda para reservar el espacio del icono:

Ejemplo

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
Inténtalo tú mismo "

Búsqueda de entrada de animación

En este ejemplo se utiliza el CSS3 transition propiedad para animar la anchura de la entrada de búsqueda cuando se pone el foco. Usted aprenderá más sobre la transition la propiedad más tarde, en nuestra CSS3 transiciones capítulo.

Ejemplo

input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
Inténtalo tú mismo "

Styling Textareas

Consejo: Utilice el resize propiedad para evitar áreas de texto sea reducida (desactivar el "enganche" en la esquina inferior derecha):

Ejemplo

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
Inténtalo tú mismo "

Styling Seleccione Menús

Ejemplo

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
Inténtalo tú mismo "

El estilo de entrada Botones

Ejemplo

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */
Inténtalo tú mismo "

Para obtener más información acerca de cómo el estilo botones con CSS, lea nuestra Tutorial CSS botones .