How to Create Checkboxes Inside a Dropdown List for Multiple Selections?

Creating Checkboxes Inside a Dropdown List

When creating a multiple selection dropdown list, the goal is to enable users to select multiple options from a dropdown menu. Using a simple approach like adding a inside a tag results in the checkbox appearing in front of the dropdown field.

To address this and allow the selection of multiple options, a more sophisticated approach is required. Here's a solution that creates checkboxes for each option within the dropdown:

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
};

<div>

This approach utilizes CSS and JavaScript to create a functional checklist that appears within the dropdown. By clicking on the "Select Fruits" anchor, users can show or hide the list of options and select multiple fruits using checkboxes.

The above is the detailed content of How to Create Checkboxes Inside a Dropdown List for Multiple Selections?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css for select checkbox using this input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Reliably Vertically Center Elements in CSS?Next article：How Can I Reliably Vertically Center Elements in CSS?

Related articles

See more

• How Can I Select Elements Based on Their Child Elements in CSS?
• Why Do Anchor Tags Sometimes Not Inherit Color From Their Parents?
• Summary of what you must pay attention to about Border when writing CSS
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved