Stile di una checkbox

[TumescentCrane]

Ciao a tutti.

Ho cercato di trovare una risposta, ma sembra che nel forum non ci sia nulla di preciso su questo problema, quindi descrivo direttamente la questione.

In una pagina xhtml sto visualizzando una serie di componenti di input e li sto formattando graficamente come è possibile vedere provando il seguente codice:

<div style="margin-top: 5px;">
   fieldTextRule:
   <input style="padding-left: 5px; border-style: solid; border-width: thin;
   border-color: #555555 #dddddd #dddddd #555555; background-color: #f8f8f8;"
   type="text" size="8" value="value" />
</div> 

Poiché ho la necessità di inserire anche delle checkbox, per uniformità stilistica dovrei modificarne l'aspetto così come ho già fatto con il campo di testo. Ho provato a usare lo stile, ma non c'è versi: non si modifica nulla.
Sarei disposto anche ad annidare tutto in un tag <div> opportunamente formattato, ma questo richiederebbe in ogni caso la scomparsa del bordo della celletta di spunta, scomparsa che non riesco a ottenere (forse David Copperfield... quello fa sparire tutto...).

La domanda quindi è: qualcuno sa se si può fare una modifica del genere? Se si, come?

In effetti avrei una risorsa estrema da malati gravi: creare 4 piccolissimi box che simulino i bordi della checkbox e posizionarli strategicamente a coprire i bordi veri!

Io però a questo non ci voglio arrivare...

[Mega69]

Qui è meglio usare javascript. In pratica ogni checkbox andrebbe sostituito da un piccolo div, al cui click compare o scompare un immagine che simula il visto.

[TumescentCrane]

Ciao Mega69 e grazie per l'interessamento.

Ho capito cosa suggerisci di fare, e sicuramente funzionerebbe non solo con le checkbox, ma anche con i radio button, per i quali nemmeno la mia idea da pazzi sarebbe applicabile (i radio button sono rotondi...).

Purtroppo però nel lavoro che sto facendo non posso usare Javascript per cui ho bisogno di preservare il funzionamento della checkbox così com'è implementato nel browser.

Aspetterò il miracolo da parte di qualcuno, ma penso proprio che si tratterebbe di un miracolo, perché per quanto la mia conoscenza del CSS non sia smodata, se non funziona con gli attributi che ho già usato, mi sa tanto che non si può fare e basta.

Strano però che i browser non accettino i CSS per certi elementi quando praticamente bordi e colori sono modificabili ormai per ogni elemento html (bè, dopo quanto sperimentato, quasi ogni elemento...).

Alla peggio, mi terrò checkbox e radio button così come sono, e se l'uniformità grafica dovesse rivelarsi così importante, toglierò le modifiche agli altri tag!!!

[Mega69]

Qualcosa potrebbe cambiare con i css3, ma ne dubito fortemente ( al massimo ci potremmo sorbire una delle solite soluzioni proprietarie, ma manco questo credo ).

[Mich_]

@ TumescentCrane
Non ho capito cosa stai chiedendo.
Parli di XHTML, ma il codice postato non sembra XHTML.
Per proter usare i CSS corretamente, occorre partire da un codice XHTML corretto sia sintatticamente che semanticamente, e il tuo (per quanto postato) sembra contenere errori di ambedue i tipi.

[TumescentCrane]

Ciao Mich_.

Sintatticamente parlando non penso che il frammento di codice che ho postato (perché, ovviamente, di un frammento si tratta, giusto per far vedere agli interessati qual'è l'effetto grafico che volevo ottenere) sia sbagliato. Il tidy lo valida senza nessun problema, 0 errori e 0 warnings. Potresti essere più preciso e indicarmi quali errori sintattici ci sono? Così correggo!

Dal punto di vista semantico invece concordo con te. Nell'esempio postato non ci sono errori di semantica, visto che ottengo esattamente quello che vorrei ottenere. Se però applico il medesimo stile a un tag input con attributo checkbox, visto che quello che vorrei non accade, le possibilità sono 4:

1- errore semantico
2- errore sintattico
3- entrambi
4- non si può fare

E passo quindi a spiegare meglio cos'è che voglio fare e per farlo, mi viene in mente ora, posso usare come esempio proprio l'editor dei messaggi che sto usando in questo momento per postare su HTML.it questo messaggio.

All'inizio dell'editor c'è una campo di testo per l'inserimento del titolo del messaggio. Sotto, per inserire un allegato, c'è un altro campo di testo. Com'è evidente, il primo è stato cambiato dal punto di vista stilistico, e lo si è fatto con il CSS; il secondo invece è standard.
Il codice postato da me fa esattamente la stessa cosa proprio per un campo di testo: ne cambia l'aspetto.

Andiamo avanti. Sempre sotto all'editor per inserire i messaggi, c'è la riga Opzioni, nella quale troviamo 4 checkbox, anche queste visualizzate in modo standard. Quello che invece vorrei ottenere, è di visualizzare le checkbox coerentemente con lo stile usato per il campo di testo; dovrebbero apparire in modo simile a come si può vedere in alto, all'altezza della riga con i tag per il codice VB, in particolare le voci Chiudi questo Tag e Chiudi tutti i Tag (quelli sono pulsanti, ma è per dare l'idea dell'aspetto che dovrebbero avere le checkbox una volta applicato lo stile).

Se potessi usare il Javascript, potrei fare come suggerisce Mega69, ossia creare delle immagini e simulare con lo script il comportamento di una checkbox, ma purtroppo non lo posso utilizzare. C'è quindi un modo per ottenere questo cambio stilistico con i CSS?

Spero di essere stato più chiaro. Se così non fosse stato fammelo sapere, che magari creo un'immagine esplicativa e la posto.

Grazie per l'interessamento e a presto!

[Mich_]

Prima gli errori di sintassi.
1. Il campo <input> non e` inserito in un <form>, ma in un <div> (oppure vedi sotto)
2. Il testo "fieldTextRule: " non e` inserito in un tag appropriato, ma direttamente in un <div>. Questo non e` permesso in XHTML (strict), anche se il validatore del W3C non lo segnala.

Poi gli errori di semantica.
3. Utilizzi i <div> per separare delle aree in un <form>: sarebbe meglio usare <filedset>.
4. Il testo di spiegazione di un campo si dovrebbe rendere con <legend>

Infine
5. Utilizzi uno stile inline, che non e` il massimo, soprattutto perche` mescoli la formattazione con il contenuto.

Nota che gli errori 2-5 non vengono segnalati dai validatori, per cui il fatto che non te li segnalino non e` automaticamente sintomo di buona programmazione.


Purtroppo per le limitazioni di IE6, per avere due campi con aspetti diversi e` necessario inserire delle classi diverse nei due campi. Quindi:
<input type="text" class="primoForm" ... />
<input type="checkbox" class="secondoForm" ... />

Poi alle varie classi si possono applicare le formattazioni che vuoi. Veramente non tutte: i browser hanno dei loro standard, che non sempre e` possibile modificare. Ad esempio la forma dei radio e` decisa dal browser, e non credo sia possibile avere un radio di forma quadrata (nei browser piu` usati).

[TumescentCrane]

Ciao Mich_. Ti ringrazio per la risposta che vado subito a commentare.

Il tag <form> non si vede semplicemente perché ho postato un estratto solo a beneficio di chi, con un taglia e incolla in un documento, avesse voluto vedere di che tipo di grafica io stessi parlando. Ti assicuro che l'<input> e dentro un <form>.

Hai ragione per il testo direttamente nel <div>. Vorrei far presente che la pagina in questione è una test page che mi serve per vedere se riesco a ottenere certi effetti grafici e stilistici, e per questo presenta delle lacune che però, nel documento finale, ovviamente verranno evitate.

Non ricordavo né il tag <fieldset> né <legend>: provvederò a correggere!

So che utilizzare lo stile inline significa buttare il 90% dei vantaggi dell'avere un foglio di stile, ma essendo una pagina di test generata da un altro sistema che sto mettendo a punto, utilizzare quelli piuttosto che il file esterno è ora estremamente più semplice. Come ti dicevo, devo solo riuscire a ottenere certi effetti, dopoché mi occuperò della generazione corretta della pagina.

Per essere definitivamente chiaro, questo è quello che vorrei ottenere:



Nei due <fieldset> (ganza 'sta cosa dei fieldset!), la prima riga ha la visualizzazione standard, la seconda la visualizzazione modificata.

Ora, penso sia chiaro che per quanto riguarda il field text, con le impostazioni di stile già postate, ottengo esattamente quello che si vede in figura.

Per quanto riguarda invece le checkbox, pur inserendo lo stesso medesimo stile nel tag <input type="checkbox" style=" code code code " /> oppure creando una classe e poi impostando la classe nel tag <input type="checkbox" class="mycheckbox" /> non c'è niente da fare: la visualizzazione di quel benedetto quadratino delle checkbox non cambia, né in Firefox, né in IE. Sono giunto alla conclusione che quella visualizzazione non si cambia e visto che non posso usare il Javascript, me la terrò così com'è.

In ogni caso ti ringrazio per il tempo che mi hai dedicato e soprattutto dei consigli che m'hai dato! Alla fine, sebbene non abbia risolto il mio problema, ho visto come fare a evitarne altri!

[Mich_]

Per una pagina di prova, ti consiglio di usare stili all'interno del tag <style>: in tal modo hai comunque una (quasi) separazione tra contenuto e presentazione e in seguito fai presto a prendere il pezzo e trasferirlo in un file a parte.
E comunque usare i CSS su un qualsiasi pezzo non semanticamente e sintatticamente corretto, puo` essere una notevole perdita di tempo: i default dei CSS sono studiati per l'uso semantico dei tag (e ne guadagna molto l'accessibilita`): un buon codice (X)HTML e` alla base di un CSS semplice ed efficace.

Invece la forma del checkbox e` stabilita dal browser e non la puoi toccare. In piu` ci sono brwoser con checkbox e radio di forme diverse: ora c'e` una consuetudine a fare il checkbox quadrato e il radio tondo, ma e` una consuetudine, non un obbligo da parte di browser.

Per il checkbox, forse riesci a rendere il bordo bianco, a inserirlo in una cornice di qualche tipo e/o a sovrapporre qualcos'altro.
Oppure puoi usare un button al posto di una checkbox e simulare il checkbox tramite JS. Ottieni una cosa poco accessibile, per cui non te la consiglio, ma si puo` fare.

[Mega69]

Usando il button però si perdono tutti i benefici estetici, quindi è meglio usare un div al cui click compare un immagine di visto. C'era uno script che si chiama form di stile ed è proprio qui su html, solo che ora nn riesco a trovarlo