Effetto Css

**unreg** · 27-02-2005, 09:42

Salve,

ho visto uno stupendo effetto su http://www.htmldog.com/

l'effetto in questione consiste che, nalla casella di testo del motore di ricerca, se uno inserisce il cursore cambia colore.

come si fa ?

ho dato un okkiata al css, ma non sono riuscito a capire il meccanismo, nalla pagina invece il codice di interesse è questo:

codice:

	<form method="get" action="http://www.htmldog.com/search/">
		<div><input type="hidden" name="sp-a" value="sp1002e60e" /><input type="hidden" name="sp-f" value="UTF-8" /><label for="morombe">Search: </label><input type="text" name="sp-q" id="morombe" /><input type="submit" value="Search" class="button" /></div>
	</form>

per favore mi spiegate come posso ottenere lo stesso effetto ?

grazie !

**andrea.paiola** · 27-02-2005, 11:18

non hai letto i links in rilievo!
C'è una sezione apposita sui form e i CSS... leggi e

**hallo63** · 27-02-2005, 11:42

es. crei 2 classi

.b{background-color:9696FF;}
.c{background-color:yellow;}

poi..

<input name="nome" type="text" id="nome" onfocus="this.className='c'" onblur="this.className='b'" >

**andrea.paiola** · 27-02-2005, 12:03

esempio 2
css:

codice:

/* Stili Esempio #2 */

#form2 {
	background: #FFFFFF;
	padding: 10px;
	width: 500px;
	border: 1px solid #000000;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

input.text {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
	padding-right: 5px;
	padding-left: 5px;
	width: 140px;
}
input.pulsante {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	background: #CCCCCC;
	text-align: center;
	padding: 5px;
	width: 140px;
	border: 1px solid #000000;
	margin-top: 10px;
}
input.text:focus {
	background: #CCCCFF;
}

input.pulsante:hover {
	background: #CCCCFF;
}
input.pulsante:active {
	background: #00CCFF;
}

td.richiesto {
	color: #000000;
	background: #3399FF;
	text-align: right;
	font: bold 12px Arial, Helvetica, sans-serif;
}
td.opzionale {
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background: #00FF33;
	text-align: right;
}

html:

codice:

<form name="form2" method="post" action="" id="form2">
  <h2><a name="esempio2"></a>Esempio 2: semplici modifiche, colori e bordi....</h2>
  

I campi segnalati in blue sono obbligatori.</p>
  <table>
    <tr> 
      <td class="richiesto">Nome:</td>
      <td><input name="textNome2" type="text" class="text" id="textNome2"></td>

    </tr>
    <tr> 
      <td class="richiesto">Cognome:</td>
      <td><input name="textCognome2" type="text" class="text" id="textCognome2"></td>
    </tr>
    <tr> 
      <td class="opzionale">Email:</td>
      <td><input name="textEmail2" type="text" id="textEmail2" class="text"></td>
    </tr>

    <tr> 
      <td></td>
      <td class="submit"><input name="Submit2" type="submit" class="pulsante" value="Invia"></td>
    </tr>
  </table>
  

Con Netscape 6, Mozilla 1.0 e Explorer 5 Mac potete gustarvi l'efficacia 
    delle pseudo-classi...</p>
</form>

preso da Esempi CSS Forms
Ti sconsiglio di usare le tabelle per il layout in quanto vanno usate solo per i dati tabellari.
Quindi questo esempio va giusto bene per capire come funziona la cosa coi CSS, ma lascerei stare l'html

Per costruire forms come si deve leggiti i link in rilievo!

**hallo63** · 27-02-2005, 12:13

x capire,
come l'ho fatto non rispetto lo standard w3c?

**unreg** · 27-02-2005, 12:20

grazie mille

**andrea.paiola** · 27-02-2005, 12:22

Originariamente inviato da hallo63
x capire,
come l'ho fatto non rispetto lo standard w3c?

semplicemente non c'è bisogno di usare 2 classi... bastano gli stati hover, focus, active ecc... son fatti per quello

**hallo63** · 27-02-2005, 12:43

ok grazie,

**unreg** · 27-02-2005, 13:07

Originariamente inviato da andrea.paiola
esempio 2
css:

codice:

/* Stili Esempio #2 */

#form2 {
	background: #FFFFFF;
	padding: 10px;
	width: 500px;
	border: 1px solid #000000;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

input.text {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
	padding-right: 5px;
	padding-left: 5px;
	width: 140px;
}
input.pulsante {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	background: #CCCCCC;
	text-align: center;
	padding: 5px;
	width: 140px;
	border: 1px solid #000000;
	margin-top: 10px;
}
input.text:focus {
	background: #CCCCFF;
}

input.pulsante:hover {
	background: #CCCCFF;
}
input.pulsante:active {
	background: #00CCFF;
}

td.richiesto {
	color: #000000;
	background: #3399FF;
	text-align: right;
	font: bold 12px Arial, Helvetica, sans-serif;
}
td.opzionale {
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background: #00FF33;
	text-align: right;
}

html:

codice:

<form name="form2" method="post" action="" id="form2">
  <h2><a name="esempio2"></a>Esempio 2: semplici modifiche, colori e bordi....</h2>
  

I campi segnalati in blue sono obbligatori.</p>
  <table>
    <tr> 
      <td class="richiesto">Nome:</td>
      <td><input name="textNome2" type="text" class="text" id="textNome2"></td>

    </tr>
    <tr> 
      <td class="richiesto">Cognome:</td>
      <td><input name="textCognome2" type="text" class="text" id="textCognome2"></td>
    </tr>
    <tr> 
      <td class="opzionale">Email:</td>
      <td><input name="textEmail2" type="text" id="textEmail2" class="text"></td>
    </tr>

    <tr> 
      <td></td>
      <td class="submit"><input name="Submit2" type="submit" class="pulsante" value="Invia"></td>
    </tr>
  </table>
  

Con Netscape 6, Mozilla 1.0 e Explorer 5 Mac potete gustarvi l'efficacia 
    delle pseudo-classi...</p>
</form>

preso da Esempi CSS Forms
Ti sconsiglio di usare le tabelle per il layout in quanto vanno usate solo per i dati tabellari.
Quindi questo esempio va giusto bene per capire come funziona la cosa coi CSS, ma lascerei stare l'html

Per costruire forms come si deve leggiti i link in rilievo!

grazie,

ma quando io vado a scrivere sulla input text del sito http://www.htmldog.com/ la input text cambia colore...

nel tuo esempio no

**unreg** · 27-02-2005, 13:56

allora, così mi funziona bene,

solo che ora volevo sapere se c'è un sistema migliore per ottenere lo stesso effetto usando meglio i css.

nel sito http://www.htmldog.com/ credo che usano un mix di css e jscritp

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.input_blur {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #333333;
}

.input_focus {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFCA;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #333333;
}

-->
</style>
</head>

<body>
<form name="form1" method="post" action="">
  <input name="nome" type="text" id="nome" onfocus="this.className='input_focus'" onblur="this.className='input_blur'" >
</form>
</body>
</html>

Discussione: Effetto Css

Strumenti discussione

Ricerca discussione

Visualizza

Effetto Css

Permessi di invio