In this blog post we will develop a custom select box input in html css and javascript
About Custom Select Box Input in HTML CSS and JavaScript
In this blog post we will develop a custom select box input in HTML CSS and javascript. This Post will let you people understand the logic behind creating custom select boxes. We will use javascript advanced tricks to deal with li that we used as options value for custom select box input. Let's put an eye to the next block where we discuss the select box logic in detail
CSS Positions
To create a customized select box input we need to adjust the child elements of the unordered list (ul) using position properties like absolute and relative. We also have to use the transform property with the translate function to place the second child element of the ul precisely inside the options box so that it fits perfectly.
So in the above paragraph I will show you guys how we edit the CSS part for creating select boxes. let's move on to the logic block
Logic Explained Behind Creating Custom Select Box
To start we need to create an HTML format using "ul" as the main div and "li" as the options value for the select box representation. The select box will contain various options with values and we will target their ID to use them as a select box value.
We will create two main divs inside ul where the first will represent the selected select box value and the other box will represent the rest of the li options with the selected one.
To manage the custom div elements we will utilize the display CSS properties specifically Flex and none. Firstly we will add the id attribute to the first div element with a value of "first" and do the same for the second div element with a value of "second". Using these identifiers we can easily render the logic. Let's proceed to the next coding block to understand how to implement select boxes in JavaScript.
Code Logic in JavaScript
Let's discuss the JavaScript code part. First we need to get all the selectors and add a click event to the custom select box to show the options. In our case the ul is the select box and the li's are the options inside the select box. After this our logic is something like this: we want our select box to show values when clicked. Once we've done this part we work on the next logic which is to hide the box when someone clicks outside of the select box. For this we add classList to add and remove CSS classes to hide the select box.
After this our last part is to show the selected value remains selected and hovered inside the second ul div (id=” second”) this div contains all the li’s. so don't get confused about it we discuss this part in the above section
Lastly we have to prepend the selected li element to the first position as it is selected and also displays the selected one as the default select box option so for doing this we will use the event to target the parentElement. In JavaScript we will do something like (e.target.parentElement) and (e.target) and use the first selector to print the selected box value in the first div.
Steps To Follow
1. Writing the HTML part
2. Creating Beautiful Layout Using CSS
3. Integrating JavaScript
4. handling with CSS properties
5. handling with ul child elements (li’s)
6. displaying the selected value
7. showing selected value on first of all li elements
8. working with e or event in javascript to target the parentElement and first selector of ul
9. That’s it
Final Conclusion
So now everything is done and the custom select box input is ready. You can improve your coding logic to the next level. Read the full post in detail if the post is not enough just understand the basics and then watch the complete YouTube video clip which explains everything through coding implementation.
