How to Create A Custom Select Box using HTML CSS

How to Create A Custom Select Box using HTML CSS

In this article, you will learn how to create Custom Select Box using HTML CSS, and JavaScript. custom select dropdown we use in many places. This is a kind of dropdown menu. However, it is much more modern than the general dropdown menu. 

This type of HTML custom Select Box has a small box. Clicking on which will bring up a dropdown. There are many options in that dropdown. The option that you select will be found in that box. If you click on that box again, you will see the options again. 

If you select any other option, in the same way, that option will also be seen in that custom select box. If you have a basic idea about HTML and CSS, you can easily create it. 

Custom Select Box CSS

Here I have used a small amount of jquery. But if you do not know jquery then there will be no problem. Because very little JavaScript has been used here.

Below is a demo that will help you learn how this HTML CSS custom select dropdown works.

See the Pen HTML CSS Custom Select Box by Ground Tutorial (@groundtutorial) on CodePen.


As you can see above, I have created a box on a web page. I used white as the background color of that box. First I put a heading on that box which will basically help to enhance the beauty. 

Then there is a box that contains the dropdown. The first option in that drop is selected in this select box by default.

When you click on that box, other options appear in front of you. If you select any one of those options, it will be found in the box.

How to Create a Custom Select box in CSS HTML

This is a very simple and easy project. You need to have a basic idea about HTML and CSS to build it. First I shared all the step-by-step tutorials then gave the required source code. 

This type of Select Box is used in different types of registration forms, check-out forms, or login forms. If you only want the source code, you can use the download button below the article.

Step 1: Basic structure of select dropdown

I have created the basic structure of custom select dropdown using the following HTML and CSS code. The background color of this box is white and the width of the box is 350px. Box-shadow is used here to make the box beautiful and bright.

<div class="card-name card-form">
 
</div>


*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comfortaa', cursive;
}

body{
background: #bfd7da;
}

.card-name{
width: 350px;
background: #fff;
margin: 80px auto;
padding: 30px;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

Basic structure of select dropdown

Step 2: Add the heading in the select box

I have added a heading in this box using the following HTML and CSS codes. Font-size: 24px has been used to increase its size.

<label class="label-title">Custom Select Box</label>


.label-title{
display: block;
padding-bottom: 10px;
color: #078195;
font-size: 24px;
text-align: center;
line-height: 28px;
font-weight: bold;
margin-bottom: 30px;
}

Add the heading in the select box

Step 3: Select box and dropdown menu

Now the following HTML CSS has been used to create a select Box. First I created an input box. If you click on that box, you can see the other options. Then I gave all the list options. 

There are five items on this list. You can increase or decrease the number of items of your choice if you want.

<div class="input-wrapper">

<div class="card-grp">
   <div class="card-input"></div>
     <div class="arrow">
        <i class="fas fa-caret-down fa-lg"></i>
     </div>
</div>

   <ul class="card-list">
     <li><i class="fab fa-cc-visa"></i></li>
     <li><i class="fab fa-cc-discover"></i></li>
     <li><i class="fab fa-cc-amex"></i></li>
     <li><i class="fab fa-cc-stripe"></i></li>
     <li><i class="fab fa-cc-jcb"></i></li>
   </ul>

</div>

Step 4: Design the select box

This input space has been somewhat designed using the following CSS. The blue color is used in its background and its size depends on the padding.

.input-wrapper{
position: relative;
}

.card-input{
width: 100%;
outline: none;
padding: 10px 20px;
background: #1058b5;
cursor: pointer;
position: relative;
color: #e8eff1;
border-radius: 3px;
}

Step 5: Design arrow marks and select lists

The arrow marks and select lists in the input space are designed using the following CSS. In other words, the following codes have been used to design the list in the Select Box.

.arrow{
position: absolute;
top: 16px;
right: 20px;
cursor: pointer;
color: #e8eff1;
}

ul.card-list{
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  top: 52px;
  display: none;
  background: #dae6e8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

ul.card-list.visible{
display: block;
}

Select box and dropdown menu

Step 6: Design the text and icons in the list

The following codes are designed to list the items in this custom select CSS. Below each list is a black border. In each case, an icon has been used.

ul li{
padding: 10px 20px;
cursor: pointer;
border-bottom: 1px solid rgb(140, 140, 140);
}

ul li{
border-top: 0;
}

ul li .fab,
.card-input .fab{
font-size: 32px;
}

Design the text and icons in the list

Step 7: Activate Custom Select Box with JQuery

Above I have designed the style select dropdown. Now it has to be implemented with the help of JQuery. You can do this with the help of JavaScript or HTML checkboxes. But here I have used a small amount of jquery.

$('.card-name .card-input').html($('.card-list li:first-child').html());

  $('.card-grp').click(function() {
    $('.card-list').toggleClass('visible');
  });

  $('.card-list li').click(function() {
    $('.card-list').removeClass('visible');
    $('.card-input').html($(this).html());
});

Activate Custom Select Box with JQuery

Hopefully from the above tutorial, you have learned how I created this Custom Select Box using HTML CSS and JQuery. Earlier I shared tutorials of different types of dropdown and custom select menus. 

The source code for creating this project (Custom Select Styles with Pure CSS) is in the download button below.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more