Programació CSS: Fer que surti una fletxeta als camps de text

Us passo un truc per a fer que els formularis HTML de les planes web que programeu tinguin una fletxeta a l’esquerra quan es passi la fletxa del ratolí pel damunt.

Fletxeta vermella a la dreta

Fletxeta vermella a la dreta

A més a més farem que mentre s’escrigui, la fletxa del cursor es converteixi en una mà, i el text aparegui en color blau.

El text és blau mentre escrivim

El text és blau mentre escrivim

Per a això haurem de crear un fitxer de tipus CSS, i col·locar-lo dins la carpeta css/

També crearem la carpeta imatges/ i hi posarem a dins la imatge de la fletxeta

Podeu descarregar-la des d’aquí: fletxa-e.gif

Dins del directori css crearem un fitxer anomenat codic-cat-test-input-fletxa.css amb aquest contingut:

/* www.codic.cat
    Arxiu css per a l'efecte de la fletxeta vermella, color del text, i fletxa del ratolí
    Enllaç curt a aquest article: http://wp.me/pzeab-1as
*/
#codic-cat-test-fletxa input, #codic-cat-test-fletxa textarea {
	color: #010101;	/* Color del text escrit */
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	border-right: 1px solid #C5C5C5;
	border-bottom: 1px solid #C5C5C5;
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	margin: 0 0 5px 0;
	padding: 1px 2px;
	cursor: pointer;
}

	#codic-cat-test-fletxa input:hover, #codic-cat-test-fletxa textarea:hover {
		color: #010101;
		background: #FFFFFF url(../imatges/fletxa-e.gif) right no-repeat;
	}

	#codic-cat-test-fletxa input:focus, #codic-cat-test-fletxa textarea:focus, #codic-cat-test-fletxa select:hover, #codic-cat-test-fletxa select:focus {
		color: #0101F1;	/* Color del text mentre escribim */
		background: none;
		background-color: #F7F7F7; /* Color gris de fons mentre escribim */
	}

Un cop fet això, crearem a l’arrel del nostre projecte un arxiu html, el podeu anomenar com volgueu, jo li he dit codic-cat-test-input-fletxa.html.

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/codic-cat-test-input-fletxa.css" />
</head>
<body>
<h1>Codic.cat formulari de demostració</h1>
<div id="codic-cat-test-fletxa">
    <form name="codic-cat-test" id="codic-cat-test" method="post">
        <input type="text" name="nom" id="nom" /><br />
        <input type="text" name="cognom" id="cognom" /><br />
        <textarea name="comentaris" id="comentaris"></textarea><br />
    </form>
</div>
<div id="codic-texte">
    Passa la fletxa del ratolí per sobre dels camps per a veure la imatge.<br />
</div>
</body>
</html>

I executem l’arxiu html amb el navegador.

Aquest codi funciona perfectament en google chrome i en firefox, però no amb internet explorer 8 de microsoft.

microsoft té una terrible voluntat de no seguir els estàndards.

Català-Catalunya English-USA Traduir a l'Anglès. Translate to English Compartir: La TafaneraIndependènciaCatosfera|FacebookTwitterFriend Feed|googleDeliciousDiggTechnoratiredditmixxyahoolivestumbleuponsimpy

Tags: ,

1.524 visualitzacions - versió en PDF

També us podria resultar interessant:

Comments are closed.