jQuery Select Option Dropdown With CSS Bootstrap | Fill In Blanks List

jQuery Select Option Dropdown With CSS Bootstrap. As you know this custom select option is created using HTML, CSS, Bootstrap, and jQuery.

jQuery Select Option Dropdown With CSS Bootstrap | Fill In Blanks List
jQuery Select Option Dropdown With CSS Bootstrap

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 previewgiven 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.

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 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.

<!DOCTYPE html>
<!-- code by codeslide {https://codeslide.in}-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>jQuery Select Option | codeslide</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.

@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.

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.