CSS
home esempi

1. introduzione
cos'è lo stile e perché è importante

2. dove si mette lo stile
in linea, incorporato, esterno
sintassi e classi


3. attributi del testo
font-family, -size, -style, -variant, -weight, -decoration

4. attributi dei margini, bordi e riempimento
margin, padding, border, width, float, clear

5. attributi di sfondo e posizionamento
position, background, visibility, overflow, z-index

6. effetti per MSIE
cursore, immagini, transizione,
scroll bar


7. effetti sui forms
position, background, visibility, overflow, z-index

effetti sui forms

Lo stile può essere applicato ad alcuni tag dei forms.


select

ampiezza per SELECT, colori per OPTION

<SELECT STYLE="width:100pt">
<OPTION STYLE="background:silver; color:black" VALUE="Ottima">Ottima
<OPTION STYLE="background:gray; color:white" VALUE="Buona">Buona
<OPTION STYLE="background:black; color:white" VALUE="Discreta">Discreta
<OPTION STYLE="background:red; color:white" VALUE="Sufficiente">Sufficiente
</SELECT>


input condizionato

clicka il box per inserire l'input:

<INPUT TYPE="checkbox" ONCLICK="document.all.Testo1.style.display = (document.all.Testo1.style.display == 'none') ? '' : 'none'">
<INPUT TYPE=TEXT STYLE="display:none" ID="Testo1" size=25>


input evidenziato

cambia sfondo se è stato inserito testo:

function CambiaSfondo(el) {
el.className = isEmpty(el.value) ? "sfondo" : "";
}
<input CLASS="sfondo" ONCHANGE="CambiaSfondo(this);" type=text name="prova" size=20>

cambia sfondo appena si tocca un tasto:

function Carattere(el) {
if (32 != event.keyCode) el.className = "";
}
function CambiaSfondo(el) {
el.className = isEmpty(el.value) ? "sfondo" : "";
}
<input CLASS="sfondo" ONKEYPRESS="Carattere(this);" ONCHANGE="CambiaSfondo(this);" type=text name="prova" size=20>