Question

您好我想在单击输入字段时删除伪:after元素。我知道我应该使用:focus，但有些原因我无法使用它。

这是HTML：

<li id="field_1_1">
    <div class="ginput_container">
        <input name="input_1" id="input_1_1" type="text">
        ::after
    </div>
</li>

:after元素是由此css引起的：

#field_1_1 .ginput_container_text:after {
    content: "\25CF";
    position: absolute;
}

我的目标是在用户点击输入字段时删除此:after元素。我已经尝试过CSS和jQuery，但我无法工作。

以下是我尝试使用CSS：

#footer-form #input_1_1:focus #field_1_1 .ginput_container_text:after {
    display: none;
}

以下是我尝试使用jQuery的内容：

jQuery("#field_1_1").click(function(){
    jQuery("#field_1_1 .ginput_container_text:after").remove();
});

有人有任何建议吗？

由于

Answer 1

您无法在jQuery中修改伪元素。您最好的选择是在CSS中修改该伪元素，并使用另一个类来指示元素的备用状态，然后在jQuery中删除或添加该类。

例如，

#field_1_1 .ginput_container_text:after {
    content: "\25CF";
    position: absolute;
}
#field_1_1.clicked .ginput_container_text:after {
    display:none;
}

和

jQuery("#field_1_1").click(function(){
    this.addClass('clicked');
});

Answer 2

我在Content之后插入了一个带有blank ::的新类，它工作正常！可能需要删除此方案的内容。

＆＃13;

jQuery("#field_1_1").click(function(){
  jQuery("#field_1_1 .ginput_container").addClass('removeAfterMe');
  
});

＆＃13;

.ginput_container::after {
    content: "ByeBye";
    position: absolute;
}

.ginput_container.removeAfterMe::after {
    content: "";
    position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="field_1_1">
    <div class="ginput_container">
        <input name="input_1" id="input_1_1" type="text">
    </div>
</li>

＆＃13;

如何使用css或jQuery编辑焦点上的伪元素

2 个答案: