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
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
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.
![]() ![]() | Compartir: ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Tags: Articles de Codi Ç, HTML / CSS
1.803 visualitzacions - versió en PDF