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

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

我已经插入一个新的类与空白::内容后，它的工作！这可能是一个解决方案，只是删除这种情况下的内容。

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

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

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

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