Nach Sichtbarkeit ausgeblendet kann ich das Kontrollkästchen nicht ändern

Ich möchte mit CSS mein Kontrollkästchen stylen. Um wahr zu sein, ich habe ein Bild, ich möchte meine Checkbox setzen. Aber nachdem ich visibility: hidden oder display_none verwende, kann ich nichts ersetzen. Kannst du mir helfen?Nach Sichtbarkeit ausgeblendet kann ich das Kontrollkästchen nicht ändern

Das ist mein HTML:

<div class="contact_dane"> 

      <input type="checkbox" id="contact_data" checked> 
      <label for="contact_data"> 
      <span> 
       Lorem ipsum lorem ipsum lorem ipsum 
      </span> 
      </label> 

      </div>

Und das ist mein CSS:

.contact_dane input[type="checkbox"] { 
    visibility: hidden; 
} 

.contact_data input[type="checkbox"] + label span { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    background: url("ok.jpg") left top no-repeat; 
}

// edit: sorry, ich habe versucht, meine Frage zu vereinfachen, und ich vergaß die CSS zu ändern Klassennamen, jetzt ist es in Ordnung.

Quelle

2016-03-31 ChickenLeg

try Verwendung Javacript. –

verwenden display: keine und was meinst du, du kannst nicht ersetzen? Auch Ihre CSS-Namen sind nicht die gleichen wie die Klassennamen in der HTML. – Jester

Danke für die CSS-Namen, wie ich in Bearbeitung schreibe, ich habe versucht, die Frage zu vereinfachen und vergessen, die CSS-Namen zu ändern. Mit "kann nicht ersetzen" meine ich, dass in allen Tutorials, die ich gesehen habe, es genau so war und die CSS durch den Hintergrund ersetzt wurden, den ich gesetzt habe. In meinem Fall verschwindet das Kontrollkästchen und nichts wird angezeigt. – ChickenLeg

sehen, dass Attribut geprüft

<input type="checkbox" id="contact_data" checked>

es sein sollte:

<input type="checkbox" id="contact_data" checked="expression">

Quelle

2016-03-31 12:13:27

Verwenden display: none; auf Sie Checkbox. Auch empfehle ich Ihre input mit span in label wie diese wickeln:

<div class="contact_dane"> 
    <label for="contact_data"> 
    <input type="checkbox" id="contact_data" checked> 
     <span> 
     Lorem ipsum lorem ipsum lorem ipsum 
     </span> 
    </label> 
</div>

und CSS:

.contact_dane input[type="checkbox"] { 
    display: none; 
} 

.contact_dane label span:before { 
    content: ""; 
    display: inline-block; 
    margin-right: 10px; 
    width: 50px; 
    height: 50px; 
    background: url("ok.jpg") left top no-repeat; 
}

JSFiddle here

Quelle

2016-03-31 12:19:47 oboshto

Ich weiß nicht warum, aber es funktioniert immer noch nicht/ – ChickenLeg

und was ist los? – oboshto

Es ist immer noch nichts, nicht einmal ein leerer Platz in der ursprünglichen, nicht gestylten Checkbox. Wie nach der Anzeige: keine verschwindet und nichts passiert stattdessen. – ChickenLeg

Sie können nicht tun, mit einem Hintergrundbild. Versuchen Sie, eine diese Beispiele es um Stil nur mit CSS:

Quelle

2016-03-31 12:43:42

Nach Sichtbarkeit ausgeblendet kann ich das Kontrollkästchen nicht ändern

Antwort

Verwandte Themen