Checkbox-Styling

ProGames

Hallo,

ich hab ein paar Schwierigkeiten meine Checkbox zu stylen, da mir ne span fehlt :( Ich hatte nähmlich folgendes gefunden:

CSS:

Code

.myCheckbox input {
    display: none;
}


.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
}


.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

Alles anzeigen

HTML:

Code

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

Leider fehlt bei meinem HTML diese span, die nach dem input kommt:

HTML:

Code

<label class="selectit">
<input ffpdm="95ybi62pplw599txuf5y3u" class=" wpuf_category_836" value="53" name="category[]" id="in-category-53" type="checkbox"> 
Controller-Unterstützung
</label>

Daher geht das nicht:

CSS:

Code

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

Ich hoffe ihr könnt mir weiterhelfen.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Michael_Drauer

Man könnte jetzt die betreffende *.php Datei suchen und das span einfach einbauen.

ProGames

Ach vergessen zu sagen, dass geht leider nicht da das ganze ein Frontend-Publishing Plugin ist und daher müssen alle Eingriffe von außen erfolgen.

Michael_Drauer

Der Witz bei allen checkbox/radiobuttons/select styling ist das die Elemente selber fast nicht gestylt werden können .. Im falle der select Auswahl nur sehr begrenzt. Sie werden vom jeweiligen Browser interpretiert und gestylt. Darum greifen die CSS Künstler zu einem trick sie verstecken die jeweiligen Elemente und stylen tags die sie beeinflussen können die mit den check/radio etc interagieren können zum Beispiel und jetzt kommt die Lösung deines Problems dem label tag. Wie du vllt. Schon bemerkt hast kannst du auch indem du nur auf das label klickst die checkbox aktivieren (natürlich nur bei gut gebauten Designs. Im label muss das for-attribute mit dem id-attribute der check/radio/input übereinstimmen). Deine Aufgabe wäre jetzt ein CSS style zu finden der sich mit dem label tag beschäftigt und nicht mit dem span.Auf dem link den du gepostet hast sind auch einige Variante vorhanden. ;). Noch eins ... Css styling ist auch ein eingriff von 'innen' wenn du also in der style.css (vorzugsweise im child theme) schreiben kannst dann kannst du auch in einer .php Datei schreiben. Eine große schwäche (meiner Meinung nach) von wordpress ist die Möglichkeit das jeder admin in dem PHP code der einzelnen Plugins schreiben kann. Somit hast du entweder keine rechte dann erledigt sich aber auch der css style oder du hast den editor noch nicht gefunden. :) egal viel Spass beim stylen.

Monika

Zitat von ProGames

Hallo,

ich hab ein paar Schwierigkeiten meine Checkbox zu stylen, da mir ne span fehlt :( Ich hatte nähmlich folgendes gefunden:

CSS:

Code

.myCheckbox input {
    display: none;
}


.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
}


.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

Alles anzeigen

HTML:

Code

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

Leider fehlt bei meinem HTML diese span, die nach dem input kommt:

HTML:

Code

<label class="selectit">
<input ffpdm="95ybi62pplw599txuf5y3u" class=" wpuf_category_836" value="53" name="category[]" id="in-category-53" type="checkbox"> 
Controller-Unterstützung
</label>

Daher geht das nicht:

CSS:

Code

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

Ich hoffe ihr könnt mir weiterhelfen.

Alles anzeigen

bei deinem Formular umfasst "label" auch die Checkbox,

daher reagiert label auch auf die Checkbox, wenn sie geklickt wurde....

versuch es damit:

HTML

label input:checked {
  font-weight: bold;
color:red;
}

wenn die Checkbox aktiviert wurde, müßte die Schrift fett und rot werden.

Funktioniert das, dann kannst etwaig auch das Background Bild ändern...

magst unterschiedliche labels für unterschiediche Checkboxen stylen, musst du noch deren ID oder Class anhängen...

HTML

label.selectit input:checked {
  font-weight: bold;
color:red;
}

ProGames

Vielen Dank für die Tipps, allerdings will das alles nicht so recht. Ich hab jetzt doch im Plugin die span (eig. ein weiteres label) hinzugefügt und dann funktioniert es reibungslos ;) Allerdings wollte daher fragen, ob es eine Möglichkeit gibt die in meinem Plugin "wp-user-frontend-pro" geänderten sachen, auch irgendwie im Theme zu ändern (ähnlich wie bei der style.css), damit ich meine änderungen nicht nach einem Update verliere.

Meine Änderungen in "wpuf-functions.php", line 636:

PHP

$output .= "\n<li id='{$taxonomy}-{$category->term_id}'>" . '<label class="selectit"><input class="'. $class . '" value="' . $category->term_id . '" type="checkbox" name="' . $name . '[]" id="in-' . $taxonomy . '-' . $category->term_id . '"' . checked( in_array( $category->term_id, $selected_cats ), true, false ) . disabled( empty( $args['disabled'] ), false, false ) . ' /><label for="in-' . $taxonomy . '-' . $category->term_id . '"> ' . esc_html( apply_filters( 'the_category', $category->name ) ) . '</label></label>';

Vorher, die ganze function:

PHP

function start_el( &$output, $category, $depth = 0, $args = array(), $current_object_id = 0 ) {
        extract( $args );
        if ( empty( $taxonomy ) )
            $taxonomy = 'category';


        if ( $taxonomy == 'category' )
            $name = 'category';
        else
            $name = $taxonomy;


        $class = isset( $args['class'] ) ? $args['class'] : '';
        $output .= "\n<li id='{$taxonomy}-{$category->term_id}'>" . '<label class="selectit"><input class="'. $class . '" value="' . $category->term_id . '" type="checkbox" name="' . $name . '[]" id="in-' . $taxonomy . '-' . $category->term_id . '"' . checked( in_array( $category->term_id, $selected_cats ), true, false ) . disabled( empty( $args['disabled'] ), false, false ) . ' /> ' . esc_html( apply_filters( 'the_category', $category->name ) ) . '</label>';
    }

Alles anzeigen

PS ich hab mal etwas über hooks gelesen, aber dann war ich verunsichert.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Checkbox-Styling

Jetzt mitmachen!