HTML одушевленные форма комментария

Question

У меня есть HTML:

<a href="#" class="addcomment">Add Comment</a> 
<div id="addcomment"> 
<form name="comment" action="" method="post"> 
<input type="text" name="addcomment" size="80" /> 
<input type="submit" value="Comment"/> 
</form> 
</div> 

и мой CSS:

#addcomment { 
display : none; 
} 
#addcomment:target { 
display : block; 
} 
.addcomment:active + #addcomment { 
display : block; 
position : absolute; 
top : 5px; 
} 

Я хочу сделать форму комментария, как в StackOverflow. Когда я нажимаю добавить комментарий, должна появиться форма.

Когда я это сделаю и нажмите «Добавить комментарий», появится форма комментария, но когда я отпустите кнопку мыши, форма исчезнет, ​​показывается только «Добавить комментарий». Как я могу сделать комментирование появляются после щелчка на "Добавить комментарий"

Answer 1

Используйте флажок и селектор :checked:

#addcomment{ 
 
    display: none; 
 
} 
 
#addcomment:target{ 
 
    display: block; 
 
} 
 
label[for=addcommentbox]{ 
 
    cursor: pointer; 
 
} 
 
#addcommentbox{ 
 
    display: none; /* Prevent the checkbox from appearing */ 
 
} 
 
#addcommentbox:checked + #addcomment{ 
 
    display: block; 
 
    position: absolute; 
 
    top: 5px; 
 
}

<label for="addcommentbox">Add Comment</label><input type="checkbox" class="addcomment" id="addcommentbox"> 
 
<div id="addcomment"> 
 
    <form name="comment" action="" method="post"> 
 
    <input type="text" name="addcomment" size="80" /> 
 
    <input type="submit" value="Comment"/> 
 
</form>

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked