How we can create an option field like a fill in the blanks dropdown using CSS? Solution: jQuery Select Option Dropdown With CSS Bootstrap, Inline fIll in the blanks list options.
Yesterday when I was surfing multiple blogs, then I have sawed a category select option on Neil Patel’s blog(visit). There is a line: I want to learn about ( options), and there are some categories dropdown to select. So, that is the inspiration behind this concept.
Today you will learn to create a fill in the blanks type dropdown select options using CSS, Bootstrap, jQuery. There is a line “I want to learn ___” now you have to select the right option. You can use this for category/tag selecting, also you can place it on forms like “My gender is ___”. This depends on your creativity that where you can place this cool element.
So, Today I am sharing jQuery Select Option Dropdown With CSS Bootstrap. As you know this custom select option is created using HTML, CSS, Bootstrap, and jQuery. As you know jQuery is JavaScript library, that’s why I am putting this program in JS category. All dropdown lists items have a cool underline effect on hover.
If you are thinking now how this Fill In Blanks List Dropdown option actually is, then see the preview given here below.
Preview Of Fill In Blanks List Options
See this video preview to getting an idea of how the select dropdown looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- CSS Masonry Image Grid
- Ghost Buttons With Icon
- Active Tab Highlight Animation
- Show Scrolling Percentage
jQuery Select Option Dropdown With CSS Bootstrap Source Code
Before sharing source code, let’s talk about it. First I have created a main div and put text inside it. Then inside the main div, I have placed a placeholder using span and created a list for dropdown items. I have used bootstrap for creating the layout and also for using some pre-built class, And jquery handling the whole program.
Now in the CSS file, I have placed all the elements on the right place. Using CSS I have done a lot of works like, hover effect, active effect, underline effect, inline display, etc. After that, using jQuery created the main function which is kind of toggle. When we click on the placeholder then the list becomes visible after choosing an option then all list gone hidden.
If you have knowledge of HTML, CSS, and JavaScript then you will understand easily this program, I can’t explain the basic things in writing. For creating this program you have to create 3 files, first for HTML, second for CSS, and third for JS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <!-- Cody By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery Select Option | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet"> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="wrapper typo">I Want To Learn <div class="list"><span class="placeholder">select</span> <ul class="list__ul"> <li><a href="">Design</a></li> <li><a href="">Development</a></li> <li><a href="">Blockchain</a></li> <li><a href="">Cloud</a></li> <li><a href="">SEO</a></li> </ul> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/** Cody By Webdevtrick ( https://webdevtrick.com ) **/ @import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap"); body { text-align: center; font-family: 'Lexend Deca', sans-serif; } .wrapper { padding-top: 150px; height: 100vh; font-size: 60px; } .typo, .list a { font-size: 60px; font-weight: 700; color: #212121; text-decoration: none; } .typo option, .list a option { font-size: 30px; } .list { display: inline-block; position: relative; margin-left: 6px; } .list ul { text-align: left; position: absolute; padding: 0; top: 0; left: 0; display: none; } .list ul .active { display: block; } .list li { list-style: none; } .list li:first-child a { color: #ff3a3a; } .list a { transition: all .4s; color: #ff3a3a; position: relative; } .list a:after { position: absolute; content: ''; height: 5px; width: 0; left: 0; background: #ff3a3a; bottom: 0; transition: all .4s ease-out; } .list a:hover { cursor: pointer; color: #ff3a3a; } .list a:hover:after { width: 100%; } select { display: inline; border: 0; margin-left: 10px; outline: none; -webkit-appearance: none; -moz-appearance: none; border-bottom: 2px solid #555; color: #ff3a3a; transition: all .4s ease-in-out; } select:hover { cursor: pointer; } select option { border: 0; border-bottom: 1px solid #555; padding: 10px; -webkit-appearance: none; -moz-appearance: none; } .placeholder { border-bottom: 4px solid; cursor: pointer; } .placeholder:hover { color: #ff3a3a; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Cody By Webdevtrick ( https://webdevtrick.com ) console.clear(); var el = {}; $('.placeholder').on('click', function (ev) { $('.placeholder').css('opacity', '0'); $('.list__ul').toggle(); }); $('.list__ul a').on('click', function (ev) { ev.preventDefault(); var index = $(this).parent().index(); $('.placeholder').text( $(this).text() ).css('opacity', '1'); console.log($('.list__ul').find('li').eq(index).html()); $('.list__ul').find('li').eq(index).prependTo('.list__ul'); $('.list__ul').toggle(); }); $('select').on('change', function (e) { $('.placeholder').text(this.value); $(this).animate({width: $('.placeholder').width() + 'px' }); }); |
That’s It. Now you have successfully created jQuery Select Option Dropdown With CSS Bootstrap, Fill In Blanks List. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
