[css-html] fare div come input type

[Fede 88]

EDIT

[kurts]

no, non puoi farlo.
ma cosa intendi esattamente con "trasformarle in div delle input" ??

[Fede 88]

Niente, ho fatto confusione io, in pratica mi servivavo delle input type trasparenti (o semi...) e pensavo non si potesse fare.

Comunque sono riuscito a risolvere parzialmente il problema, infatti così sono semitrasparenti su tutti i browser che ho provato fin ora:

<input type="text" name="username" style="width: 230px; filter:alpha(opacity=50); moz-opacity: .50; opacity: .50;" onBlur="check_user()"/>

Ora quello che devo fare è mettere un bordo solid di 1px, per sostituire il clasico bordo che da l'effetto concavo. Ho fatto in questo modo, su IE è perfetto però su Firefox mi crea dei problemi.

<input type="text" name="username" style="width: 230px; border: 1px solid; filter:alpha(opacity=50); moz-opacity: .50; opacity: .50;" onBlur="check_user()"/>

PS:
Posso creare una classe con quelle caratteristiche per assegnarla a tutte le input type?

[kurts]

certo che si, una classe (o un id) puoi assegnarla senza problemi, in alternativa se le modifiche riguardano tutti gli input puoi anche non assegnare una classe

eccoti un esempio:

<style>
body{
	background: #ad35f1;
}

input{
	background: #235335;
	border: 1px solid yellow;
	margin: 50px;
	padding-left: 15px;
	float: right;
	clear: both;
	width: 100px;
	height: 40px;
	font-size: 30px;
}
</style>

<input type="text" name="username" style="width: 230px"/>
<input type="password" name="pass" style="width: 230px"/>

ok,ok, sorvoliamo sui colori penosi ma per il resto mi pare che sia abbastanza chiaro.
non so come mai ma quando sparo dei codici a caso escono sempre dei colori di m....

[Fede 88]

GIà, davero un bel abbinamento

A cosa serve

clear: both;

?

[kurts]

l'attributo clear può avere 4 valori: left, right, both, none.
serve a dire quale lato vuoi liberare dal resto degli elementi.
in parole povere, clear: left vuol dire che a sinistra di questo elemento non vuoi niente e così via.

se ad esempio tu avessi un contenitore di larghezza 100 e due div interni di larghezza 20 ognuno normalmente andrebbero uno a fianco all'altro, con il clear puoi mandarne a capo uno.
se togli il clear dal mio esempio i due input si affiancheranno, provare per credere!

[Fede 88]

Una spiegazione che non fa una piega...

Comunque ho visto che applicare la classe a tutti gli input come il tuo esempio non va bene nel mio caso, infatti mi applica lo stile anche hai bottoni e addirittura alle checkbox.

Per creare una classe per le div facevo in questo modo:

div.container {
	...
             ...
             ...
}

Per gli input che parola devo mettere al posto di DIV?

[kurts]

nono, aspetta, io non ho definito nessuna classe nel mio esempio, prima avevo detto che se volevi applicare uno stile a tutti gli input potevi seguire il mio esempio.

ad ogni modo, diciamo che vuoi mettere lo sfondo blu al campo della password, ok?

<style>
.campo_password{
	background-color: 0000ff;
}
</style>

<input type="password" name="pass" class="campo_password"/>
<input type="password" name="pass" class="campo_password2"/>

insomma, nel tag HTML dell'input aggiungi la voce class="qualcosa" e poi nel css (in questo caso ne ho usato uno inline per velocità) metti da qualche parte .qualcosa{attributi vari}

come vedi il campo con classe campo_password2 rimane invariato

[Fede 88]

Capito.

Ho creato questa classe e l'ho applicata agli input type text e password.

Però ho 2 problemi:
1. Il mio obiettivo era quello di far diventare le celle semitrasparenti, però così diventa semitrasparente. Mi spiego meglio, se metto il testo di colore nero, viene visualizzato grigio. E' possibile rendere semitrasparente l'input type ma non il testo?
2. Credo sia dovuto al cambio di carattere, però applicando quello stile alle password, quando digito la pass, al posto di visualizzare i pallini visualizza dei quadratini con dentro dei punti di domanda. Si può risolvere mantenendo il "Calibri"?

.input_reg{
	background: white;
	border: 1px solid black;
	padding: 0px 0px 0px 5px;
	float: left;
	clear: none;
	width: 230px;
	height: 19px;
	font-family: Calibri; 
	font-size: 16px;	
	filter: alpha(opacity=50); 
	  moz-opacity: .50; 
	  opacity: .50;
}

[kurts]

Originariamente inviato da Fede 88

E' possibile rendere semitrasparente l'input type ma non il testo?

boh... a dire il vero non avevo mai sentito parlare di questi attributi che stai usando per le trasparenze, dal nome immagino che siano robe di FF infatti su IE non si notano differenze

Originariamente inviato da Fede 88

2. Credo sia dovuto al cambio di carattere, però applicando quello stile alle password, quando digito la pass, al posto di visualizzare i pallini visualizza dei quadratini con dentro dei punti di domanda. Si può risolvere mantenendo il "Calibri"?

si, quello è dovuto al fatto che probabilmente questo "calibri" non ha il carattere per il pallno, però, guarda, cambiare tipo di carattere è nel 99% dei casi una cosa inutile, se uno non ha quel carattere installato sul suo sistema non lo può visualizzare quindi viene utilizzato quello di default del sistema o quello specificato nelle preferenze del browser, infatti io vedo le scritte col solito carattere

[Fede 88]

Originariamente inviato da kurts

boh... a dire il vero non avevo mai sentito parlare di questi attributi che stai usando per le trasparenze, dal nome immagino che siano robe di FF infatti su IE non si notano differenze

Io su IE8 le vedo trasparenti, tu che versione hai di IE?

Originariamente inviato da kurts

si, quello è dovuto al fatto che probabilmente questo "calibri" non ha il carattere per il pallno, però, guarda, cambiare tipo di carattere è nel 99% dei casi una cosa inutile, se uno non ha quel carattere installato sul suo sistema non lo può visualizzare quindi viene utilizzato quello di default del sistema o quello specificato nelle preferenze del browser, infatti io vedo le scritte col solito carattere

Ok, metto quello di default. Pensavo che calibri potesse andare bene dato che ce l'avevo di default in windows vista.

[kurts]

Originariamente inviato da Fede 88

Io su IE8 le vedo trasparenti, tu che versione hai di IE?

umh... lemme check
ah, ecco: 7.0.5730.13

[Fede 88]

Quindi direi che circa il 50% degli utenti non la supportano dato che se non la supporta il 7 non la supporterà anche il 6...

Comunque non è un problema, chi può le vedrà in trasparenza chi no le vedrà normali.

[vhost87]

Originariamente inviato da Fede 88

Quindi direi che circa il 50% degli utenti non la supportano dato che se non la supporta il 7 non la supporterà anche il 6...

Comunque non è un problema, chi può le vedrà in trasparenza chi no le vedrà normali.

La trasparenza la vede solo Firefox 2.x, IE 8 e Safari 3.x mi pare

[Fede 88]

Grazie per l'info...

Per caso sai se è possibile applicare la trasparenza solo alla cella e non alla scritta contenuta in essa?

[kurts]

se dai alla cella di input un "background: transparent;" la scritta non viene influenzata, l'effetto è supportato da tutti i browser, il problema di questo metodo è che non hai l'efffetto di trasparenza al 50% come vuoi tu ma al 100%

in alternativa puoi mettere una bella immagine di sfondo semi-trasparente così isolvi tutto

[Fede 88]

Hai ragione, così eliminerei anche il problema di IE6-7, giusto?

[Fede 88]

Ho provato a fare come mi hai consigliato, però anche se metto un immagine semitrasparente viene visualizzata come se fosse un immagine normale non trasparente.

E' normale?

[kurts]

Originariamente inviato da Fede 88

E' normale?

no, non è normale, io ho fatto una pagina di prova e la vedo perfettamente sia con FF che con IE

te la allego così provi anche tu

[Fede 88]

Può essere dovuto al fatto che io ho usato una PNG tutta colorata però con trasparenza al 50%? Anche se mi sembra strano...

Faccio qualche prova e ti faccio sapere.