Capoletta, centrare, lista

Come forse tutti avrete avuto modo di constatare, i tre input speciali (ossia capoletta, centrare e lista) non seguono le direttive che vengono date agli input per quanto riguarda il colore del testo. Questo perché sono immagini e, in quanto tali, non possono essere cambiate di colore (grave, visti gli scompensi che possono causare in certe situazioni).

Vediamo come risolvere accuratamente il problema. Prima di tutto è necessario distinguerle a livello di css:

CODICE

.codebuttons[accesskey="f"] ----> capoletta
.codebuttons[accesskey="c"] -----> centrare
.codebuttons[accesskey="l"] -----> lista

Cambiare lo sfondo

Il primo modo per risolvere il problema è quello di editare i tre bottoni con uno sfondo differente, che renda leggibili i segni, essendo per l'appunto immagini con sfondo trasparente.

È quindi sufficiente raggruppare i tre bottoni e applicare un colore di background:

CODICE

.codebuttons[accesskey="f"], .codebuttons[accesskey="c"], .codebuttons[accesskey="l"] {background-color: #HEX !important}

dove al posto di HEX ci va il colore di esadecimale.

Cambiare le immagini

Se il primo metodo non vi soddisfa, in quanto preferireste mantenere lo stesso colore di background, sarà necessario sostituire direttamente le immagini, colorate in maniera che siano leggibili.

CODICE

.codebuttons[accesskey="f"] img, .codebuttons[accesskey="c"] img, .codebuttons[accesskey="l"] img {position: relative; left: -9999px}
.codebuttons[accesskey="f"] {background: transparent url(http://img.forumfree.net/index_file/bb_cap.png) no-repeat center}
.codebuttons[accesskey="c"] {background: transparent url(http://img.forumfree.net/index_file/bb_center.gif) no-repeat center}
.codebuttons[accesskey="l"] {background: transparent url(http://img.forumfree.net/index_file/bb_ol.gif) no-repeat center}

Nel codice sono presenti le immagini predefinite del circuito, sarà sufficiente sostituirle con altre di più idonee.

Trick a cura di .|Ye|. per lo Skinfactory