Custom Select Dropdown Using HTML Radio Input

by
Custom Select Dropdown Using HTML Radio Input
Code Snippet: CSS only Select ( radio + checkbox ) No JS
Author: Aron
Published: January 27, 2024
Last Updated: February 3, 2024
Downloads: 149
License: MIT
Edit Code online: CodeHim
Read More
 Demo
Download (5 KB)

This code snippet helps you to create a custom select dropdown using HTML radio input and pure CSS styling. The dropdown has various styles for different states, such as normal, disabled, toggle, and confirm. It enhances the user interface by providing a visually appealing and functional alternative to the default select dropdown. The code utilizes CSS animations and transitions for a smoother user experience. This custom dropdown helps create a more stylish and interactive selection component on your web pages.

How to Create Custom Select Dropdown Using HTML Radio Input

1. First of all, copy the following HTML code into your project. The code includes three different examples, each demonstrating a unique style for the custom select dropdown. The <div> elements with class “select” and “select2” represent the custom select dropdowns. For each dropdown, replace the placeholder text and icons within the <span> elements to reflect the options you want to offer.

<h1 class="animated fadeInDown"><i class="icon icon-arrow-down"></i></h1>

<h1 class="animated rotateIn">PURE CSS SELECT</h1>
<p>1. Normal</p>
<div class="select animated zoomIn">
    <!-- You can toggle select (disabled) -->
    <input type="radio" name="option">
    <i class="toggle icon icon-arrow-down"></i>
    <i class="toggle icon icon-arrow-up"></i>
    <span class="placeholder">Choose...</span>
    <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-speedometer"></i>Speedometer</span>
    </label>
    <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-fire"></i>Fire</span>
    </label>
    <label class="option">
        <input type="radio" name="option" disabled>
        <span class="title animated fadeIn"><i class="icon icon-handbag"></i>Handbag</span>
    </label>
    <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-badge"></i>Badge</span>
    </label>
</div>
<br>
<br>
<p>2. Disabled</p>
<div class="select animated zoomIn">
    <!-- You can toggle select (disabled) -->
    <input type="radio" name="option" disabled>
    <i class="toggle icon icon-arrow-down"></i>
    <i class="toggle icon icon-arrow-up"></i>
    <span class="placeholder">Choose...</span>
    <label class="option">
        <input type="radio" name="option">
        <span class="title"><i class="icon icon-speedometer"></i>Speedometer</span>
    </label>
    <label class="option">
        <input type="radio" name="option">
        <span class="title"><i class="icon icon-fire"></i>Fire</span>
    </label>
    <label class="option">
        <input type="radio" name="option" disabled>
        <span class="title"><i class="icon icon-handbag"></i>Handbag</span>
    </label>
    <label class="option">
        <input type="radio" name="option">
        <span class="title"><i class="icon icon-badge"></i>Badge</span>
    </label>
</div>
<br>
<br>
<p>3. Toggle & Confirm</p>
<div class="select2 animated zoomIn">
    <!-- You can toggle select (disabled) -->
    <label>
        <input type="checkbox" name="placeholder">
        <i class="toggle icon icon-plus"></i>
        <i class="toggle icon icon-minus"></i>
        <span class="placeholder">Choose...</span>
        <label class="option">
            <input type="radio" name="option">
            <span class="title animated fadeIn"><i class="icon icon-speedometer"></i>Speedometer</span>
        </label>

        <label class="option">
            <input type="radio" name="option">
            <span class="title animated fadeIn"><i class="icon icon-fire"></i>Fire</span>
        </label>
        <label class="option">
            <input type="radio" name="option" disabled>
            <span class="title animated fadeIn"><i class="icon icon-handbag"></i>Handbag</span>
        </label>
        <label class="option">
            <input type="radio" name="option">
            <span class="title animated fadeIn"><i class="icon icon-badge"></i>Badge</span>
        </label>
    </label>
</div>
<br>
<br>
<br>

2. Style the dropdown using the following CSS styles. Feel free to modify the CSS code to customize the appearance of your custom dropdown. Adjust colors, fonts, and sizes to match your website’s overall design.

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300';
@import 'https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.3.2/css/simple-line-icons.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css';
@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:300,700';
body{
  display: block !important;
  width: 100%;
  min-height: 900px;
  margin: 3em auto;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7cac9+0,92a8d1+100 */
  background: #f7cac9;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #f7cac9 0%, #92a8d1 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #f7cac9 0%, #92a8d1 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #f7cac9 0%, #92a8d1 100%) !important;
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* IE6-9 fallback on horizontal gradient */
  font-family: "Roboto Mono";
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 3em;
  letter-spacing: 0px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}
h1 i {
  position: relative;
  font-size: 70px;
}

p {
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin-bottom: 2em;
  line-height: 30px;
}
p img {
  position: relative;
  top: 8px;
  right: 10px;
}

.select {
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
  width: 330px;
  border-bottom: 0px;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
}
.select > i.toggle {
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.6em;
  color: #ccc;
}
.select .title,
.select .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5em 2em;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.select > input {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}
.select > input:checked ~ i.toggle.icon-arrow-down {
  display: none;
}
.select > input:checked ~ i.toggle.icon-arrow-up {
  display: block;
}
.select > input:checked div.options label.option .title {
  display: none !important;
}
.select > input:not(:checked) {
  z-index: 4;
}
.select > input:not(:checked) ~ label.option > span.title {
  display: none;
}
.select > input:not(:checked) ~ i.toggle.icon-arrow-up {
  display: none;
}
.select > input:not(:checked) ~ i.toggle.icon-arrow-down {
  display: block;
}
.select > input:disabled {
  cursor: no-drop;
}
.select > span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}
.select label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
}
.select label.option span.title {
  position: relative;
  z-index: 2;
  transition: background 0.3s ease-out;
}
.select label.option span.title i.icon {
  padding-right: 8px;
  color: #92a8d1;
}
.select label.option span.title:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.select label.option input {
  display: none;
}
.select label.option input:checked ~ span.title {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0px;
  font-size: 12px;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: inherit;
  width: 100%;
}
.select label.option input:disabled ~ span.title {
  background: #f9f9f9 !important;
  color: #aaa;
}
.select label.option input:disabled ~ span.title:hover {
  color: #aaa;
  background: none;
  cursor: no-drop;
}

.select2 {
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
  width: 330px;
  border-bottom: 0px;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
}
.select2 i.toggle {
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.6em;
  color: #ccc;
}
.select2 .title,
.select2 .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5em 2em;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.select2 > label > input {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}
.select2 > label > input:checked {
  z-index: 2;
}
.select2 > label > input:checked ~ i.toggle.icon-plus {
  display: none;
}
.select2 > label > input:checked ~ i.toggle.icon-minus {
  display: block;
}
.select2 > label > input:not(:checked) ~ i.toggle.icon-minus {
  display: none;
}
.select2 > label > input:not(:checked) ~ i.toggle.icon-plus {
  display: block;
}
.select2 > label > input:not(:checked) ~ label.option input:not(:checked) ~ .title {
  display: none !important;
}
.select2 > label > input:disabled {
  cursor: no-drop;
}
.select2 label > span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}
.select2 label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
}
.select2 label.option span.title {
  position: relative;
  z-index: 2;
  transition: background 0.3s ease-out;
}
.select2 label.option span.title i.icon {
  padding-right: 8px;
  color: #92a8d1;
}
.select2 label.option span.title:hover {
  color: #fff;
  background: rgba(146, 168, 209, 0.5);
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.select2 label.option input {
  display: none;
}
.select2 label.option input:checked ~ span.title {
  position: absolute;
  display: block;
  z-index: 1;
  top: 0px;
  font-size: 12px;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: inherit;
  width: 100%;
}
.select2 label.option input:disabled ~ span.title {
  background: #f9f9f9 !important;
  color: #aaa;
}
.select2 label.option input:disabled ~ span.title:hover {
  color: #aaa;
  background: none;
  cursor: no-drop;
}

That’s all! hopefully, you have successfully created a custom select dropdown on your website. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X