elementos - estructura de un formulario en html



¿Puede diseñar una etiqueta de entrada de formulario activa solo con CSS? (4)

Dale a tu botón de entrada una clase de estilo

estilo css:

INPUT.book:hover, INPUT.book:focus:hover {
    background-image:url(book_over.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

INPUT.book {
    background-image:url(book_active.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

y la entrada html:

<input name="Bestil2" type="submit" class="book"  value="Book møde" />

Todavía no he descubierto cómo evitar el fondo gris a pesar de que tengo un archivo png transparente, tal vez solo un jpg sea suficiente. Pero espero que esto ayude. Buena suerte :-)

https://ffff65535.com

Dado el siguiente html

<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />

Puede estilo la entrada en el enfoque usando

input:focus { background: green; }

¿Hay alguna forma de estilizar también la <label /> sin JavaScript?

Gracias a todos


Esto se puede hacer si tiene como objetivo los navegadores que admiten flexbox; vea esto: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview

Por brevedad, el css es mínimo, pero necesitará algunos prefijos específicos del navegador para extender el soporte a los navegadores algo más antiguos.


Puede, siempre y cuando la label siga la input en el marcado:

input:focus + label,
input:active + label {
    /* style */
}

Puedes usar un selector de atributos:

label[for=inputelement]:focus,
label[for=inputelement]:active {
    /*styles here*/
}

Tenga en cuenta que esto no es compatible con IE6, pero debería funcionar en todos los demás navegadores, incluidos IE7 e IE8.

Eso obviamente solo funcionará para esa identificación específica. Si desea que funcione para todas las ID, simplemente omita la ID:

label[for]:focus,
label[for]:active {
    /*styles here*/
}

Esto ahora funcionará para todas las etiquetas con un atributo for .

Si necesitas algo intermedio, necesitarás clases.





css