ho bisogno di aiuto: form personalizzati con immagini e senza js

[stranyera]

ciao ragazzi, ho bisogno del vostro aiuto.
devo realizzare 2 paginette che conterranno entrambe dei form che pero' dovranno avere un aspetto grafico ben determinato (le immagini le ho fatte io).
non puo' essere in javascript e devo poter rendere disattive sia le textarea che delle select.

Qualcuno mi puo' aiutare? grassie mille!

[salasir]

Un po' vaga come richiesta ...

Per ora ti indico qualche risorsa, poi ci risentiamo con problemi e/o domande più precise.

Accessible HTML/XHTML Forms
Logica e stile dei form html
Sylish Buttons

Style Web Forms Using CSS
form css layout

PS un consiglio: utilizza TUTTI i tag relativi ai form (se già non lo fai) fieldset, legend, ...

[stranyera]

grazie salasir
ti spiego meglio.ho due pagine che conterranno due form con semplici campi di testo a riga singola, delle select option ed ovviamente il button "invia".
Questi elementi dei form dovranno avere un aspetto grafico diverso dal solito dato da immagini che ho creato io (compreso la freccina della select ).
Ho provato con un sistema che per quanto riguarda l'aspetto grafico era perfetto, ma purtroppo utilizza anche javascript e questo per me sarebbe evitabile.

Andrebbe bene questo sistema http://www.picment.com/articles/css/...ms/default.asp di cui avevo già passato qualche ora a studiare ma non riesco a capire come modificare la select/option

[stranyera]

in pratica gli elementi del mio form devono essere cosi'...compreso la select dove ho scritto "TIM"

[salasir]

Premesso che non ho trovato niente sulla gestione dei select (o meglio ho trovato che non si può intervenire molto e che IE funziona anche meno) Moduli con stile: usare i CSS con i form , ho buttato lì questo per iniziare (basandomi sul link che hai indicato:

CSS 
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.6em;
margin:50px;
color:#666666;}
label {
margin: 0;
padding:0.2em;
margin-top:0.3em;
text-align:right;
width:70px;
float:left;
text-transform:uppercase;
  }
fieldset {
  background-color:#eee;
  border:solid 1 #fff; /* Opera doesn't get border:none or border:0 on fieldsets */
  width:300px;
  }
legend {
width:194px;
height:30px;
color:#fff;
font-size:2em;
padding-left:0.5em;
background: transparent url("legend_bg.gif") no-repeat;
position:relative;
top:-1em;
text-transform:uppercase;
font-weight:bold;
letter-spacing:-1px;
white-space:pre; /* hack: make sure */
}

.br {display:none;}  
  
.textfield {
font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
color:#333 ;
margin:3px;
height:20px;
border:solid 0 #fff;
padding: 3px 8px;
background: transparent url("textfield_bg.gif") no-repeat fixed;
width:200px;
voice-family: "\"}\""; 
voice-family:inherit;
width:187px;
}
fieldset>input.textfield {
background: transparent url("textfield_bg.gif") no-repeat;
}

select.textfield {
background: transparent url("textfield_bg.gif") no-repeat;
}

.submit {
margin:3px;
background: transparent url("submit.gif") no-repeat;
height:20px;
border:solid 0 #fff;
width:80px;
font: bold 1.1em Verdana, Arial, Helvetica, sans-serif; 
color:#666;
text-transform:uppercase;
 }

(X)HTML 
<form action="default.asp" method="post">
<fieldset>

<label for="name">Numero</label><br class="br" />
<input name="name" type="text" class="textfield"  id="name"  />
<label for="Oper">Operatore</label><br class="br" />
<select id="Oper" name="Oper" class="textfield"  size="1" tabindex="1">
   <option value="TIM">TIM</option>
   <option value="WIND">WIND</option>
   <option value="3">3</option>
</select><br class="br" />



<label for="submit"></label><br class="br" />
<input name="submit" type="submit" class="submit" id="submit" value="Invia" />

</fieldset>

</form>

Devi inserire il path corretto per le tue immagini