Guide: How to Count HTML State Changes Real-Time using CSS
Counting is an ubiquitous task in web applications. How many unread emails do you have? How many tasks are unchecked on your to-do list? How many donut flavors are in the cart? They are all crucial questions that users deserve answers to. So this post will show you how to tel bi-declared elements, which make up most of the user’s controls, such as check boxes and text input, using CSS counters You have to target those states with CSS first, which is possible through pseudo classes and HTML attributes that enable us to do just that. Go ahead and experiment with the idea and explore the different pseudo-classes that can dynamically indicate the change in an element’s state. We’ll start with the simplest checkboxes.
1. Checkboxes
Checkboxes go into “checked” status when checked. The: controlled pseudo-class indicates the checked state
check box # 1 check box # 2 check box # 3
Checked: Not checked:
:: root {counter-reset: tickedBoxCount, unTickedBoxCount;} input[type=”checkbox”]{counter-increment: unTickedBoxCount;} input[type=”checkbox”]: checked {counter-increment: tickedBoxCount;} # tickedBoxCount :: before {content: counter (tickedBoxCount);} # unTickedBoxCount :: before {content: counter (unTickedBoxCount);}
As I said before, this matter is very simple. We set two counters at the root element and increment each for each checkbox for the two states respectively. The counter values are then displayed in a designated place using the content property
If you want to understand it better how CSS counters work, check out our previous post.
Below you can see the final result. When you check and uncheck the boxes, the values of the counters are ‘Checked’ and ‘Unchecked’ modified real-time
2. Text input
We can also count how much text input there is are filled and how much are left blank by the user. This solution will not be as easy as the previous one because, unlike checkboxes, text input has no pseudo classes to mark when they are filled. So we have to find an alternative route. There is a pseudo class that indicates when an element has placeholder textIt’s called: placeholder-shown. If we use placeholders in our text input, we can know when the input field is empty. This happens when the user hasn’t typed anything in yet because the placeholder disappears when that happens.
Stuffed: Empty:
:: root {counter-reset: filledInputCount, emptyInputCount;} input[type=”text”]{counter-increment: filledInputCount;} input[type=”text”]: placeholder-shown {counter-increment: emptyInputCount;} # filledInputCount :: before {content: counter (filledInputCount);} # emptyInputCount :: before {content: counter (emptyInputCount);}
The result is similar to the previous one: the two counters are automatically raised and lowered as we add or remove text from the input fields.
3. Details
Alternative states of an element do not always have to be indicated by pseudo classes only. There could be HTML attributes that do that job, as in the case of the :: root {counter-reset: openDetailCount, closedDetailCount;} details {counter-increment: closedDetailCount;} details[open]{counter-increment: openDetailCount;} # closedDetailCount :: before {content: counter (closedDetailCount);} # openDetailCount :: before {content: counter (openDetailCount);} The result is two real-time CSS counters again: Open and Closed.
4. Radio buttons
Counting the radio buttons require a different technique. We could certainly use the: check-pseudo-class we used for checkboxes. However, radio buttons to be used differently than checkboxes
Radio buttons to be meant to be in groupsThe user can only select one within a group. Each group acts as a single unit. The two say a radio button group is either one of the buttons is selected or none of them have been selected
So we shouldn’t count the radio buttons per person buttons, but by button groupsTo achieve that, we use the: nth-of-type selectorI’ll explain later; let’s see the code first.
radio 1.1 radio-1.2 radio-1.3 radio-2.1 radio 2.2 radio-2.3 < br> radio-2.1 radio 2.2 radio-2.3
Selected: Not selected:
We have to assign the same name to the radio buttons in the same group. Each group in the above code has three radios buttons within.
:: root {counter-reset: selectedRadioCount, unSelectedRadioCount;} input[type=”radio”]: nth-of-type (3n) {counter-increment: unSelectedRadioCount;} input[type=”radio”]: nth-of-type (3n): checked {counter-increment: selectedRadioCount;} input[type=”radio”]: not (: nth-of-type (3n)): checked {counter-increment: unSelectedRadioCount -1 selectedRadioCount;} # selectedRadioCount :: before {content: counter (selectedRadioCount);} # unSelectedRadioCount :: before {content: counter ( unSelectedRadioCount);}
The first three style rules in the above snippet are the same as the ones we applied to checkboxes, except instead of targeting each radio button we focus on the latest radio button in each group, which in our case is the third (: nth-of-type (3n)). So we don’t count all radios buttons but only one per group
However, that doesn’t give us a correct real-time result like we do have not yet set a rule for counting the other two radios buttons in the groupIf one of them is checked, it should be counted and the unchecked result should decrease at the same time.
This is why we add a -1 value after unSelectedRadioCount in the last style line targeting the other two radios buttons in a group. If one of them is checked, -1 will decrease the uncontrolled result
The placement of graves
You can only see the correct result after counting is completedie after all elements to be counted have been processed. Therefore, we have to place the element in which we will display the counters only after the elements to be counted in the HTML source code. You may not want to show the counters below the elements, but somewhere else on the page. In this case you must move the counters using CSS properties such as translate, margin or position. But my suggestion would be to use the CSS Grid so you can create the layout of your page regardless of the order of the elements in the HTML source codeFor example, you can easily create a grid that places the counters above or next to the input fields.
How to Count HTML State Changes Real-Time using CSS: benefits
Faq
Final note
I hope you like the guide How to Count HTML State Changes Real-Time using CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Count HTML State Changes Real-Time using CSS, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Count HTML State Changes Real-Time using CSS”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Count HTML State Changes Real-Time using CSS, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
