This project is part of my “CSS Limit Series,” where I explore how far CSS alone can be pushed beyond its usual role.
In this article, I explain how to create a simple chatbot using only HTML and CSS—no JavaScript at all.
You can try the live demo here.
Please use Chrome or Microsoft Edge, for the best experience.
Some browsers may not display the embedded version correctly, so I recommend experiencing it directly on the demo page.
1. Enter your text into the input box at the bottom.
2. Click the ↑ button to submit your message.
3. The “AI” automatically generates a reply.
*In reality, it randomly selects one of 20 preset responses.*
4. The generated message appears one character (or one word) at a time.
5. You can repeat this process about 5–10 times.
6. When “I'm not a robot” appears, check the box ✅ and close it.
7. You can continue chatting with the AI with no practical limit.
The system uses two separate <form> elements.
Each form contains five .dialogue blocks, and each block pairs a text input, a checkbox, and a response.
Each .dialogue has three states:
1. Initial state – the checkbox and text box are empty, and the response is hidden.
2. Active state – the user can type into the text box. When the previous .dialogue becomes completed, this one becomes active.
3. Completed state – the checkbox is checked, the text box becomes read‑only, and the response is shown.
Each form has its own reset button. When the reset button is clicked, all .dialogue blocks in that form return to the initial state.
By resetting each form alternately, the system creates the illusion of an infinite chat.
The reset button is labeled “I'm not a bot,” so the reset and reuse feel like a natural part of the interaction.