HomeОбразованиеRelated VideosMore From: smashtheshell

How to Style and Customize HTML Select Box Created by Select Element using CSS

99 ratings | 18967 views
How to Style and Customize HTML5 Select Box Created by Select Element using CSS https://youtu.be/lRFsCYDk4Vw WHAT WILL YOU LEARN? Learn to style an HTML select box using CSS and replace the default arrow for the dropdown applied by the browser with your own custom arrow. You will learn to create cross-browser custom css3 select box dropdown using the HTML5 select tag. It means the select box arrows will be supported in all the major browsers including ie10 or above. Here you also will learn three different methods to create a custom select box dropdown without using any external javascript library or bootstrap. We will simply use few css3 advance properties to get the effect of the custom arrow in your select dropdown box or what you call HTML combo box. I will show you how easily you can hide the default arrow from selectbox and apply your own custom arrow. ===============DOWNLOAD SOURCE CODEs============== *Code to Follow Along: https://goo.gl/MTXSFT *Click on the Fork Button on Codepen After Opening the Link to Start following Finished Final Code: https://goo.gl/ERqNWJ ===================================================== =================Navigate to Specific part============= 1:30 - Applying common styles to all select elements 3:58 - #1 Background Image Technique to Style HTML5 Select Box 7:15 - #2 Using CSS3 Border to Create Downword Arrow 13:27 - #3 Using FontAwesome Glyphicon for the Arrow in our Selectbox Dropdown list ==================================================== HOW WE WILL CREATE OUR CUSTOM SELECTBOX USING CCS3? To create a select box we simply use the html5 document to create our markup for the select box. We will create three different select boxes using the "select" element and the "option" element for creating dropdown lists. To hide the default styling from the select element applied by the browser we will use the css3 appearance property and set its value to none. And then, we will use an another useful rule to hide the default arrows applied by Internet explorer 10; from the select box dropdown. THREE DIFFERENT METHODS THAT WE WILL BE USING Each select box will be using a different method for styling the dropdown arrow inside the combobox. - The first Method will show using an Image Background technique to create custom arrow for the CSS select box. - The second method will use the CSS border property to create a triangular shape that will be used to customize your select element's dropdown arrow. - Finally, the third method will use the fontawesome glyphicon to create our custom arrow for the selectbox dropdown. All, the method will have the cross-browser support for our custom css3 select box. Each method ensures that it works properly in the Internet explorer 10 or above and other older browser. PROVIDE YOUR FEEDBACK If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Creating Simple Horizontal Navigation Bar using Flexbox https://goo.gl/oR0lGf Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your webpage using javascript https://goo.gl/JJuclF ================CONTACT and RESOURCES============== Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Html code for embedding videos on your blog
Text Comments (11)
Kusum Lata Pandey (2 days ago)
how to add font awesome icon with select option content
smashtheshell (2 days ago)
If you are trying to add icon inside the option tag or want to style the option that, it's really not possible. The reason is that option is rendered by the OS and it cannot be styled directly. So you have to create the custom select box using HTML ul element.
Sirius Khuram (8 days ago)
sir how can i change option hover color to red.....?
Nandansingh Solanki (2 months ago)
Is select a container tag or not?
Alvin Tan Jun Liang (4 months ago)
For z-index , might not work for modal dialog . { pointer-events:none; } This might work and render the element empty
Sōma Yukihira (5 months ago)
how does the page change without reloading the page?
zi akash (3 months ago)
live reloder plagin
rasel (10 months ago)
life saving video dude thanknyou.u tech things so easily...
smashtheshell (9 months ago)
Hey, thank you so much for your kind words!
Harsha's Python Guide (1 year ago)
Thank You !!
smashtheshell (1 year ago)
your welcome bro!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.