Creating your own custom selection is an exciting opportunity to personalize your choices

Question

Creating your own custom selection is an exciting opportunity to personalize your choices

I am interested in creating my own customized select element.

Currently, the design of my select element is as follows:

https://i.sstatic.net/eQNXb.png

This is the code for how it is currently implemented:

<p>Title</p>
<form>
    <input type="color" onchange="colorisPanneau(value);pageSuivante();" name="coloris_panneau" list="liste_color3" id="coloris_panneau" value="#C5B9A9" class="formc" style="height:24px;width:202px;">
    <datalist id="liste_color3">
        <option value="#FFFFFF">
        <option value="#999999">
        <option value="#000000">
        <option value="#582810">
    </datalist>
</form>

However, I would like to transform it into something similar to this:

https://i.sstatic.net/OhoJA.png

Is there a way I can achieve this?

What steps should I take to customize the interface of my combobox?

Additionally, where can I find resources or documentation to help me with this customization process?

Thank you for your assistance!

javascript jquery html css

Answer 1

Answer №1

It's impossible to modify the datalist using CSS, even with some CSS magic. You'll never be able to have multiple items inside the datalist options. The only workaround is to create a select box from scratch.

To get you started, here's something I put together for you:

$('html').on("click", function(e) {
  $('.color-picker').removeClass('open');
});
$(document).on("click", ".color-value", function(e) {
  e.stopPropagation();
  if ($('.color-picker').hasClass('open')) {
    $('.color-picker').removeClass('open');
  } else {
    $('.color-picker').addClass('open');
  }
});
$(document).on("click", ".list-item", function() {
  var color = $(this).data('color');
  $('#color-input').val(color);
  $('.color-value').html($(this).html());

  // This now becomes the value of your hidden input field
  $('#value').html(color);
});

* {
  box-sizing: border-box;
}

.color-picker {
  height: 30px;
  width: 150px;
  overflow: hidden;
  color: #666;
  background: #FFF;
}

.open {
  overflow: visible;
}

.list {
  border: 1px solid #CCC;
  border-top: none;
  background: #FFF;
}

.list-item {
  padding: 5px;
  cursor: pointer;
}

.list-item:hover {
  background: #f1f1f1;
}

.list-item > span {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  line-height: 20px;
}

.list-item > span:first-child {
  width: 20px;
  margin-right: 5px;
}

.color-value {
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  width: 100%;
  cursor: pointer;
  border: 1px solid #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="color-picker">
  <input id="color-input" type="hidden" name="coloris_panneau" value="" />
  <div class="color-value list-item">Select your color</div>
  <div class="list">
    <div class="list-item" data-color="#edae0e">
      <span style="background:#edae0e;"></span>
      <span>Yellow</span>
    </div>
    <div class="list-item" data-color="#ff0000">
      <span style="background:#ff0000;"></span>
      <span>Red</span>
    </div>
    <div class="list-item" data-color="#336699">
      <span style="background:#336699;"></span>
      <span>Blue</span>
    </div>
  </div>
</div>

Answer 2

It's impossible to modify the datalist using CSS, even with some CSS magic. You'll never be able to have multiple items inside the datalist options. The only workaround is to create a select box from scratch.

To get you started, here's something I put together for you:

$('html').on("click", function(e) {
  $('.color-picker').removeClass('open');
});
$(document).on("click", ".color-value", function(e) {
  e.stopPropagation();
  if ($('.color-picker').hasClass('open')) {
    $('.color-picker').removeClass('open');
  } else {
    $('.color-picker').addClass('open');
  }
});
$(document).on("click", ".list-item", function() {
  var color = $(this).data('color');
  $('#color-input').val(color);
  $('.color-value').html($(this).html());

  // This now becomes the value of your hidden input field
  $('#value').html(color);
});

* {
  box-sizing: border-box;
}

.color-picker {
  height: 30px;
  width: 150px;
  overflow: hidden;
  color: #666;
  background: #FFF;
}

.open {
  overflow: visible;
}

.list {
  border: 1px solid #CCC;
  border-top: none;
  background: #FFF;
}

.list-item {
  padding: 5px;
  cursor: pointer;
}

.list-item:hover {
  background: #f1f1f1;
}

.list-item > span {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  line-height: 20px;
}

.list-item > span:first-child {
  width: 20px;
  margin-right: 5px;
}

.color-value {
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  width: 100%;
  cursor: pointer;
  border: 1px solid #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="color-picker">
  <input id="color-input" type="hidden" name="coloris_panneau" value="" />
  <div class="color-value list-item">Select your color</div>
  <div class="list">
    <div class="list-item" data-color="#edae0e">
      <span style="background:#edae0e;"></span>
      <span>Yellow</span>
    </div>
    <div class="list-item" data-color="#ff0000">
      <span style="background:#ff0000;"></span>
      <span>Red</span>
    </div>
    <div class="list-item" data-color="#336699">
      <span style="background:#336699;"></span>
      <span>Blue</span>
    </div>
  </div>
</div>

Creating your own custom selection is an exciting opportunity to personalize your choices

https://i.sstatic.net/OhoJA.png

Answer №1

Similar questions

Validation is key! jQuery form validation triggers a popup notification upon successful submission

Upload files using Ajax

How to initiate a download via a GET request in axios

Passport verification is successful during the login process, however, it encounters issues during registration

Having difficulty with the useState hook in a material ui functional component that integrates with Firebase

.value not being grabbed from options of selected index

Having difficulty adjusting the text to match the image alignment

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

The hide and show buttons seem to be missing when utilizing the datatable API

Tips for effectively handling repetitive bootstrap CSS code

When utilizing the array.push method, new elements are successfully added, however, it appears to also overwrite the last object

How can I prevent Bootstrap from conflicting with my custom styles?

Is there a way to reorganize the image/text grid using a media query?

Localhost Firebase authentication with Facebook integration

Is it possible to apply a delay function to JQuery's AjaxStart/Stop events?

Combine several POST requests by utilizing AJAX and jQuery

Angular Boilerplate is experiencing difficulties in properly reading ABP

What is the best way to assign the value of an HTTP GET request to a subarray in Angular 8

Text that is arranged vertically and adjusts its size and layout

Resizing Div elements in React