Html 勾选复选框时，如何在输入文本中划行？

多亏了另一位用户在这里提出的问题，我能够在勾选旁边的复选框时划破文本，多亏了以下HTML和CSS：

<style>
    /* Customize the label (the container) */
    .container {
    position: relative;
    padding-left: 50px;
    margin-bottom: 12px;
    cursor: pointer;
    color: #333;
    font-size: 18px;
    }
    /* 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: #fff;
    border: solid 2px #194263;
    position: absolute;
    left:0;
    top:0;
    margin-right: 10px;
    }
    /* Show the checkmark when checked */
    .container input:checked~.checkmark:after {
    display: block;
    left: 9px;
    top: 5px;
    width: 8px;
    height: 14px;
    border: solid #194263;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    content: "";
    position: absolute;
    margin-right: 10px;
    }
    /* strike through the text */
    .container input:checked~.checkmark {
    text-decoration: line-through
    }
</style>
<label class="container">
<input type="checkbox">
<span class="checkmark"></span><br> 
</label>

/*自定义标签（容器）*/
.集装箱{
位置：相对位置；
左侧填充：50px；
边缘底部：12px；
光标：指针；
颜色：#333；
字号：18px；
}
/*隐藏浏览器的默认复选框*/
.容器输入{
显示：无
}
/*创建自定义复选框-使用：：before*/
.checkmark：：之前{
内容：“；
高度：25px；
宽度：25px；
背景色：#fff；
边框：实心2px#194263；
位置：绝对位置；
左：0；
排名：0；
右边距：10px；
}
/*选中时显示选中标记*/
.容器输入：选中~。选中标记：之后{
显示：块；
左：9px；
顶部：5px；
宽度：8px；
高度：14px；
边框：实心#194263；
边框宽度：0 3px 3px 0；
变换：旋转（45度）；
内容：“；
位置：绝对位置；
右边距：10px；
}
/*划过课文*/
.container输入：选中~.checkmark{
文字装饰：线条贯穿
}

现在，我想让用户添加他们自己的文本，并且在勾选复选框时仍然在文本中划行。在span标记中添加输入字段（如下所示）不起作用

<label class="container">
<input type="checkbox">
<span class="checkmark"><input type="text" minlength="1" maxlength="100" size="60%" placeholder="Add an item"></span><br>   
</label>

---

为什么这不起作用？该怎么办？

您的代码有以下问题。当您编写这些css行时：

。容器输入：选中~。选中标记{
文字装饰：线条贯穿
}

您没有将

text装饰：line through

css属性添加到要删除的text

input

元素中，而是添加到复选标记中。因此，文本输入元素不接收任何贯穿样式

我为解决您的问题所做的是将样式添加到文本输入中。我通过对HTML和CSS进行一些小更改来实现这一点，代码如下：

/*自定义标签（容器）*/
.集装箱{
位置：相对位置；
左侧填充：50px；
边缘底部：12px；
光标：指针；
颜色：#333；
字号：18px；
}
/*隐藏浏览器的默认复选框*/
.container输入[type=“checkbox”]{
显示：无
}
/*创建自定义复选框-使用：：before*/
.checkmark：：之前{
内容：“；
高度：25px；
宽度：25px；
背景色：#fff；
边框：实心2px#194263；
位置：绝对位置；
左：0；
排名：0；
右边距：10px；
}
/*选中时显示选中标记*/
.容器输入：选中~。选中标记：之后{
显示：块；
左：9px；
顶部：5px；
宽度：8px；
高度：14px；
边框：实心#194263；
边框宽度：0 3px 3px 0；
变换：旋转（45度）；
内容：“；
位置：绝对位置；
右边距：10px；
}
/*划过课文*/
.容器输入：选中~输入{
文字装饰：线条贯穿
}

您的代码存在以下问题。当您编写这些css行时：

。容器输入：选中~。选中标记{
文字装饰：线条贯穿
}

您没有将

text装饰：line through

css属性添加到要删除的text

input

元素中，而是添加到复选标记中。因此，文本输入元素不接收任何贯穿样式

我为解决您的问题所做的是将样式添加到文本输入中。我通过对HTML和CSS进行一些小更改来实现这一点，代码如下：

/*自定义标签（容器）*/
.集装箱{
位置：相对位置；
左侧填充：50px；
边缘底部：12px；
光标：指针；
颜色：#333；
字号：18px；
}
/*隐藏浏览器的默认复选框*/
.container输入[type=“checkbox”]{
显示：无
}
/*创建自定义复选框-使用：：before*/
.checkmark：：之前{
内容：“；
高度：25px；
宽度：25px；
背景色：#fff；
边框：实心2px#194263；
位置：绝对位置；
左：0；
排名：0；
右边距：10px；
}
/*选中时显示选中标记*/
.容器输入：选中~。选中标记：之后{
显示：块；
左：9px；
顶部：5px；
宽度：8px；
高度：14px；
边框：实心#194263；
边框宽度：0 3px 3px 0；
变换：旋转（45度）；
内容：“；
位置：绝对位置；
右边距：10px；
}
/*划过课文*/
.容器输入：选中~输入{
文字装饰：线条贯穿
}