チェックボックスがチェックされている場合の取り消し線テキスト

Question

このチェックボックスをオンにすると、チェックボックスをオンにするとテキストに取り消し線も表示されます。

私はリンク内のコードを以下のコードを組み合わせることを試みた私は仕事に取り消し線、またはCSSスタイルのいずれかを取得することができますが、私は両方が同時に:(

を動作させることはできませんしかし、私は私が間違ってやっているかを把握することはできません。 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>

Answer 1

だから、最初のAFそれを追加し、あなたが交差するテキスト内のラベルを作成しますターチェックボックスと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>

Answer 2

をあなたは例とは逆（チェックボックスとテキスト内側のラベルの両方を持っているとラベルが来る場所を参照していますのチェックボックスの後に）マークアップを少し並べ替える必要があります。

修正したいテキストは、テキストは、独自の要素の中になければならない（CSSとして親要素を選択することはできません）兄弟セレクタを動作させるためのチェックボックス（+または~）の後に来るように持っている、と。

私はあなたが.textという名前の独自のspanの内側にそれを置く提案：

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

それは、以下のものを使用して確認し、チェックボックスの兄弟であるときには、テキストを選択することができます。

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

置きますこれをコードに入力すると、次のようになります。

/* 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>

Answer 3

あなたは単に私はこれがdownvotedれた理由を聞いてみたい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>