Größe der Checkboxen mit JavaScript

[Resi]

Hallo,
ich lasse meine Checkboxen mit jQuery stylen.
Für einen Anwendungsfall ist mir die Größe des Buttons aber viel zu groß.

Ich habe nun mal mit Firebug geschaut, an was es liegt.
Der angegebene label-Tag wird durch jQuery mit einem Span darin erweitert, in dem dann der Text steht.
Dieser Span bekommt die Klasse ui-button-text.
Diese Klasse hat folgende Angabe: padding: 0.4em 1em;

Genau daran liegt es, dass der Button so groß wird.
Gebe ich dem label-Tag eine Klasse mit, wird diese nicht an den span weitergegeben. Das heißt, mit Padding, Margin Angaben kann ich den Button nicht kleiner machen.
Width Height-Angaben gehen aber der Text hat weiterhin sein Padding, so dass er nicht mehr mittig ist.

Ich könnte nun die .css-Datei von jQuery umschreiben, was aber 2 Nachteile hat: Zum einen, es würde nun bei allen Checkboxen anders gemacht werden, was ich nicht will.
Wird eine neue Version raus gegeben, muss die Änderung wieder gemacht werden.

Wie kann ich am besten Einfluss auf die Größe nehmen?

Danke für eure Hilfe.

[Markus**]

Moin!

Gebe ich dem label-Tag eine Klasse mit, wird diese nicht an den span weitergegeben...

bezeichne die angaben in der Klasse die Du mitgibst mit dem !important keyword.

also etwa:

.pseudo {
   padding: 0.1em 0.5em !important;
}

damit das jquery style übertrumpft wird.

Markus**

[Resi]

Hallo,
danke für die Antwort

Leider funktioniert es nicht.

Folgendes habe ich angegeben:

  
<input type="checkbox" id="MEINECHECKBOX" /><label for="MEINECHECKBOX" class="MEINEKLASSE">NAME</label>  

Die css-Angabe sieht so aus:

  
.MEINEKLASSE  
{  
	padding:0px !important;  
}  

raus kommen tut:

  
<input id="MEINECHECKBOX" class="ui-helper-hidden-accessible" type="checkbox">  
<label class="MEINEKLASSE ui-state-active ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" for="MEINECHECKBOX" aria-pressed="true" role="button" aria-disabled="false">  
	<span class="ui-button-text">NAME</span>  
</label>  

Es bleibt so groß, weil die Klasse ui-button-text des span von dem important gar nicht betroffen ist. <labal> hat war nun padding 0 aber das paddding das spans macht den Button groß.

[gast_42]

.MEINEKLASSE
{
padding:0px !important;
}

  
du willst doch vermutlich auch eher das CSS des span ändern, oder?  
  
Dann solltest du das auch tun, zB:  
  
~~~css
  
label.MEINEKLASSE span.ui-button-text  
{  
 padding:0px !important;  
}  

[Resi]

danke, die art mit der verschachtelten angabe kannte ich noch nicht

so gehts