Erledigt - Contact Form 7 Radio / Checkboxen

[derkleineprinz]

Hallo,
durch einen komplett verlust, stehe ich nun wieder vor dem Problem, dass im CF7 die Radio/Checkboxen nicht korrekt angezeigt werden.

das sollte aber bitte sowohl unter Firefox, Chrome, IE und mobil so aussehen:

Ich Danke euch jetzt schon für eure Hilfe!
Die Seite ich nicht Online.

 

[Squeendot]

Servus kleiner Prinz,

das kriegst du ganz einfach mit CSS hin.
Wichtig hierbei die appearance bei allen Elementen!

Das ganze würde dann wohl ungefähr so aussehen:

input[type="checkbox"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     -ms-appearance: none;
     -o-appearance: none;
     padding: 3px;
     border-radius: 0px;
     border: 1px solid #777;
}

input[type="radio"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     -ms-appearance: none;
     -o-appearance: none;
     padding: 3px;
     border-radius: 50%;
     border: 1px solid #777;
}

Außerdem noch die input-Felder und Label auf float: left; stellen, damit sie nebeneinander sind.
Außenrum macht es Sinn, einen Container zu setzen, damit du diese Zweispaltigkeit hinbekommst.

Ich hoffe, ich konnte helfen.


LG,

Julian

 

[derkleineprinz]

Hallo
vielen Dank erst mal für deine Hilfe. Aber das mit input-felder und label auf float: left;
gesetzt, aber das funzt nicht siehe Bild:

das habe im im Formular
<h3>Weitere Angaben</h3>
<strong>Aufzug</strong>
<div class="row-fluid">
<div class="span4 field">[checkbox personenaufzug "&nbsp;Personenaufzug"]</div>
<div class="span4 field">[checkbox lastenaufzug "&nbsp;Lastenaufzug"]</div>
</div>

<div class="row-fluid">
<div class="span4 field">[checkbox schaegaufzug "&nbsp;Schrägaufzug"]</div>
</div>

<strong>Küche</strong>
<div class="row-fluid">
<div class="span4 field">[radio kueche "&nbsp;Einbauküche"]</div>
<div class="span4 field">[radio kueche "&nbsp;Pantry"]</div>
</div>


Vielleicht liegt es daran, dass ich so erkältet bin.
Kannst du mir bitte auf die sprünge helfen?

Danke!

 

[Squeendot]

Oh, da hab ich wohl Breite und Höhe vergessen

Einfach den Feldern noch width: und height: geben, dann funzt alles

Musst halt ausprobieren wie viel du brauchst / willst.

LG,

Julian

 

[derkleineprinz]

soweit alles ok. Danke! Aber es wir leider weder in den checkboxen noch in den radio buttons angezeigt,
welches Feld aktiviert ist.

 

[derkleineprinz]

Zur Info:
im firefox

werden die aktiven felder angezeigt,

unter chrome

nicht.

was muss ich noch ändern?

 

[Mediaoase]

Versuch mal den Radio Button auch im Modus checked zu stylen. Das müsste gehen.

input[type="radio"]:checked {
     background: #000; //oder Farbverlauf etc. für Effekte
}

 

[Squeendot]

Versuch mal den Radio Button auch im Modus checked zu stylen. Das müsste gehen.

Jap, so sollte es funktionieren... Hier kannst du auch ein Hintergrundbild einfügen, wenn du einen speziellen Haken möchtest

 

[derkleineprinz]

Vielen Dank!