Durchgestrichener Text, wenn das Kontrollkästchen aktiviert ist

Kann mir jemand mit diesem Code helfen, so dass der Text auch durchgestrichen ist, wenn das Kontrollkästchen aktiviert ist?Durchgestrichener Text, wenn das Kontrollkästchen aktiviert ist

Ich kann entweder die gestrichener zu arbeiten, oder das CSS-Styling, aber ich kann nicht beides gleichzeitig arbeiten :(

Ich habe versucht, den Code mit dem Code in dem Link zu kombinieren , aber ich kann nicht herausfinden, was mache ich falsch. CSS checkbox strikethrough Demo

/* Customize the label (the container) */ 
 
.container { 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 35px; 
 
    margin-bottom: 12px; 
 
    cursor: pointer; 
 
    font-size: 22px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
/* Hide the browser's default checkbox */ 
 
.container input { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
/* Create a custom checkbox */ 
 
.checkmark { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: #eee; 
 
} 
 

 
/* On mouse-over, add a grey background color */ 
 
.container:hover input ~ .checkmark { 
 
    background-color: #ccc; 
 
} 
 

 
/* When the checkbox is checked, add a blue background */ 
 
.container input:checked ~ .checkmark { 
 
    background-color: #2196F3; 
 
} 
 

 
/* Create the checkmark/indicator (hidden when not checked) */ 
 
.checkmark:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
/* Show the checkmark when checked */ 
 
.container input:checked ~ .checkmark:after { 
 
    display: block; 
 
} 
 

 
/* Style the checkmark/indicator */ 
 
.container .checkmark:after { 
 
    left: 9px; 
 
    top: 5px; 
 
    width: 5px; 
 
    height: 10px; 
 
    border: solid white; 
 
    border-width: 0 3px 3px 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
}

<label class="container">Two 
 
    <input type="checkbox"> 
 
    <span class="checkmark"></span> 
 
</label>

Quelle

2017-11-21 Newbie

-3

So wird zuerst ein Etikett erstellen, die Text innerhalb Sie überqueren wollen, fügen Sie es af ter Checkbox und fügen Sie diese CSS:

input[type=checkbox]:checked + label{ 
    text-decoration: line-through; 
}

/* Customize the label (the container) */ 
 
.container { 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 35px; 
 
    margin-bottom: 12px; 
 
    cursor: pointer; 
 
    font-size: 22px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
/* Hide the browser's default checkbox */ 
 
.container input { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
/* Create a custom checkbox */ 
 
.checkmark { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: #eee; 
 
} 
 

 
/* On mouse-over, add a grey background color */ 
 
.container:hover input ~ .checkmark { 
 
    background-color: #ccc; 
 
} 
 

 
/* When the checkbox is checked, add a blue background */ 
 
.container input:checked ~ .checkmark { 
 
    background-color: #2196F3; 
 
} 
 

 
/* Create the checkmark/indicator (hidden when not checked) */ 
 
.checkmark:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
/* Show the checkmark when checked */ 
 
.container input:checked ~ .checkmark:after { 
 
    display: block; 
 
} 
 

 
/* Style the checkmark/indicator */ 
 
.container .checkmark:after { 
 
    left: 9px; 
 
    top: 5px; 
 
    width: 5px; 
 
    height: 10px; 
 
    border: solid white; 
 
    border-width: 0 3px 3px 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
input[type=checkbox]:checked + label{ 
 
    text-decoration: line-through; 
 
}

<label class="container"> 
 
    <input type="checkbox"><label> Cross me </label> 
 
    <span class="checkmark"></span> 
 
</label>

Quelle

2017-11-21 23:37:13

-1

Wie Sie sowohl das Kontrollkästchen und den Text innerhalb das Etikett (im Gegensatz zum Beispiel haben Sie verweisen, wo das Etikett kommt nach das Kontrollkästchen) müssen Sie Ihr Markup leicht neu anordnen.

Der Text, den Sie ändern möchten, muss nach dem Kontrollkästchen für die Geschwisterselektoren funktionieren (+ oder ~), und (wie CSS keine übergeordneten Elemente auswählen kann) muss der Text innerhalb eines eigenen Elements sein.

Ich schlage vor, Sie es innerhalb der eigenen setzen span.text genannt:

<label class="container"> 
    <input type="checkbox"> 
    <span class="checkmark"></span> 
    <span class="text">Two</span> 
</label>

Anschließend können Sie den Text auswählen, wenn es die Geschwister eines geprüft Checkbox ist auf folgende Arten:

.container input:checked ~ .text { 
    text-decoration: line-through; 
}

Einlochen Dies in Ihrem Code erhalten wir die folgenden:

/* This is our new part*/ 
 

 
.container input:checked ~ .text { 
 
    text-decoration: line-through; 
 
} 
 

 
/* Customize the label (the container) */ 
 
.container { 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 35px; 
 
    margin-bottom: 12px; 
 
    cursor: pointer; 
 
    font-size: 22px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
/* Hide the browser's default checkbox */ 
 
.container input { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
/* Create a custom checkbox */ 
 
.checkmark { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: #eee; 
 
} 
 

 
/* On mouse-over, add a grey background color */ 
 
.container:hover input ~ .checkmark { 
 
    background-color: #ccc; 
 
} 
 

 
/* When the checkbox is checked, add a blue background */ 
 
.container input:checked ~ .checkmark { 
 
    background-color: #2196F3; 
 
} 
 

 
/* Create the checkmark/indicator (hidden when not checked) */ 
 
.checkmark:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
/* Show the checkmark when checked */ 
 
.container input:checked ~ .checkmark:after { 
 
    display: block; 
 
} 
 

 
/* Style the checkmark/indicator */ 
 
.container .checkmark:after { 
 
    left: 9px; 
 
    top: 5px; 
 
    width: 5px; 
 
    height: 10px; 
 
    border: solid white; 
 
    border-width: 0 3px 3px 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
.container input:checked ~ .checkmark:after { 
 
    display: block; 
 
}

<label class="container"> 
 
    <input type="checkbox"> 
 
    <span class="checkmark"></span> 
 
    <span class="text">Two</span> 
 
</label>

Quelle

2017-11-21 23:44:18 agrm

Ich würde gerne hören, warum dieser Downvoted wurde: o) – agrm

nur eine Vermutung Extra Markup wenn nicht benötigt – dippas

@dippas Solange OP sowohl die Checkbox als auch den Text innerhalb desselben Elements platziert, wird es tatsächlich benötigt, oder? – agrm

Sie können dies einfach tun mit Pseudo-Elementen ::before und ::after mit text-decoration: line-through

/* Customize the label (the container) */ 
 

 
.container { 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 35px; 
 
    margin-bottom: 12px; 
 
    cursor: pointer; 
 
    font-size: 22px; 
 
} 
 

 
/* Hide the browser's default checkbox */ 
 
.container input { 
 
    display: none 
 
} 
 
/* Create a custom checkbox - using ::before */ 
 
.checkmark::before { 
 
    content: ""; 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: #eee; 
 
    position: absolute; 
 
    left:0; 
 
    top:0; 
 
} 
 
/* On mouse-over, add a grey background color */ 
 
.container:hover input~.checkmark::before { 
 
    background-color: #ccc; 
 
} 
 

 
/* When the checkbox is checked, add a blue background */ 
 
.container input:checked~.checkmark::before { 
 
    background-color: #2196F3; 
 
} 
 

 
/* Show the checkmark when checked */ 
 
.container input:checked~.checkmark:after { 
 
    display: block; 
 
    left: 9px; 
 
    top: 5px; 
 
    width: 5px; 
 
    height: 10px; 
 
    border: solid white; 
 
    border-width: 0 3px 3px 0; 
 
    transform: rotate(45deg); 
 
    content: ""; 
 
    position: absolute; 
 
} 
 

 
/* strike throught the text */ 
 
.container input:checked~.checkmark { 
 
    text-decoration: line-through 
 
}

<label class="container"> 
 
    <input type="checkbox"> 
 
    <span class="checkmark">Two</span> 
 
</label>

Quelle

2017-11-22 00:05:34 dippas

Durchgestrichener Text, wenn das Kontrollkästchen aktiviert ist

Antwort

Verwandte Themen