Subscriure's per RSS/AtomUs 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.
  Traduir a l'Anglès. Translate to English | Compartir:    |   |          |
Tags: Articles de Codi Ç, HTML / CSS
1.803 visualitzacions - versió en PDF