checkbox troppo grande, classe assegnata anche al form input

[stardom]

Sto letteralmente impazzendo per ridurre le misure di un input[type="radio"], input[type="checkbox"] troppo grande. Credo la causa sia il tema Wordpress utilizzato, perchè se cambio il width questo va a toccare anche la lunghezza dei campi modulo. E persino nel backend, ogni tanto mi trovo il checkbox enorme.
Pagina esempio. Qualcuno può capire dove sta il conflitto, oppure suggerirmi una classe che rimanga indipendente? Grazie in anticipo.

[ResianTaxidrive]

assegna un'altra classe all'input del checkbox e poi fai
input.tuaclasse{width:20px;}

[stardom]

si ma quel checkbox non risiede in nessun particolare div o p, ma è il checkbox di default del sistema (ecco perchè me lo trovo grande pure nel backend).

[KillerWorm]

Il problema è dato dal fatto che, sul relativo file style.css, width e height sono applicate all'elemento input (in generale, cioè a tutti gli elementi input a prescindere dal tipo), secondo la regola:

input {
  outline: 0;
  border: none;
  width: 100%;
  height: 34px;
  color: #333333;
  font-size: 16px;
  padding: 5px 15px;
  border-radius: 3px;
}

Posso solo presumere che sia stato impostato così per agire sui campi di testo in generale, ma inevitabilmente anche checkbox e radio subiscono queste regole.

Tra l'altro su Firefox non vedo l'elemento ingrandito come su Chrome, sebbene l'area sensibile risulti comunque estesa al 100% di larghezza e 34px di altezza.

Ad ogni modo potresti risolvere, molto semplicemente, ripristinando i valori width e height per i soli campi di tipo checkbox e radio.

Sullo stesso file, in riferimento alla riga 200, hai già delle regole per tali elementi. Basta aggiungere width: initial; e height: initial; in questo modo:

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  width: initial;
  height: initial;
}

Dovrebbe risolvere.

[stardom]

KillerWorm, hai compreso esattamente il problema e ti sei spiegato molto meglio di me. Non conoscevo "initial", ma a quanto pare non sta facendo effetto... anzi, mi rimangono persino cancellati nel page-inspector. Potrebbe essere nello stile del bootstrap?

[KillerWorm]

Non vedo la modifica.
Il file css è esattamente quello che ti ho linkato.

[stardom]

Buongiorno. Strano, ho notato che nella pagina che avevo precedentemente indicato la modifica è avvenuta, ma in quest'altra (a fondo pagina) no. Come ce lo spieghiamo ?

[KillerWorm]

Ciao, in quel caso ci sono delle altre regole (con specificità maggiore) che vanno a sovrascrivere quelle modificate.
Puoi risolvere indicando la clausola !important, in questo modo:

width: initial !important;
height: initial !important;

[stardom]

....tu mi insegni che usare !important è sempre un po' rischioso, comunque ora il checkbox sembra risolto. Ti ringrazio veramente per la piccola lezione.

[KillerWorm]

tu mi insegni che usare !important è sempre un po' rischioso

Già, chiaramente si può risolvere in maniera più pulita se si imposta al meglio il css, ma in questo caso prendila come una pezza che risolve rapidamente il problema.