css 如何从颜色选择器中为输入框指定不同的值？

我有两个不同的输入框id和我有两个不同的颜色选择器调色板。我正在尝试做的是让用户选择一种颜色，并已选定的颜色打印在输入框中。目前它的一半工作方式。问题是当用户从调色板中选择两个输入框的变化，而不是第一个或第二个。
我想用户选择第一种颜色，它的假设显示在第一个输入框，当用户选择第二种颜色，它的假设显示在第二个输入框。

var selector = '.color-list .color';
    $(".color").css('background', function() {
      return $(this).data('color');
    });

    $(selector).on('click', function() {
      var colorName = $(this).data('name');
      var colorHEX = $(this).data('color');
      $(selector).removeClass('active');
      $(this).addClass('');
      $('#options_1010_text').val(colorName);
      $('#test-bg').css('background-color', colorHEX);

    });


    var selector = '.color-list .color';
    $(".color").css('background', function() {
      return $(this).data('color');
    });

    $(selector).on('click', function() {
      var colorName = $(this).data('name');
      var colorHEX = $(this).data('color');
      $(selector).removeClass('active');
      $(this).addClass('');
      $('#options_1011_text').val(colorName);
      $('#test-bg').css('background-color', colorHEX);

    });

    var acc = document.getElementsByClassName("customAccordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }

    $(document).ready(function() {

      var jobCount = $('#list1 .in1').length - 1;
      $('.list-count1').text(jobCount + ' items');

      $("#search-text").keyup(function() {
        //$(this).addClass('hidden');

        var searchTerm = $("#search-text").val();
        var listItem = $('#list1').children('li');

        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        //extends :contains to be case insensitive
        $.extend($.expr[':'], {
          'containsi': function(elem, i, match, array) {
            return (elem.textContent || elem.innerText || '').toLowerCase()
              .indexOf((match[3] || "").toLowerCase()) >= 0;
          }
        });

        $("#list1 .color-list li").not(":containsi('" + searchSplit + "')").each(function(e) {
          $(this).addClass('hiding out').removeClass('in1');
          setTimeout(function() {
            $('.out').addClass('hidden');
          }, 300);
        });

        $("#list1 li:containsi('" + searchSplit + "')").each(function(e) {
          $(this).removeClass('hidden out').addClass('in1');
          setTimeout(function() {
            $('.in1').removeClass('hiding');
          }, 1);
        });

        var jobCount = $('#list1 .in1').length - 1;
        $('.list-count1').text(jobCount + ' items');

        //shows empty state text when no jobs found
        if (jobCount == '0') {
          $('#list1').addClass('empty');
        } else {
          $('#list1').removeClass('empty');
        }

      });
    });



    $(document).ready(function() {

      var jobCount = $('#list2 .in2').length - 1;
      $('.list-count2').text(jobCount + ' items');

      $("#search-text").keyup(function() {
        //$(this).addClass('hidden');

        var searchTerm = $("#search-text").val();
        var listItem = $('#list2').children('li');

        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        //extends :contains to be case insensitive
        $.extend($.expr[':'], {
          'containsi': function(elem, i, match, array) {
            return (elem.textContent || elem.innerText || '').toLowerCase()
              .indexOf((match[3] || "").toLowerCase()) >= 0;
          }
        });

        $("#list2 .color-list li").not(":containsi('" + searchSplit + "')").each(function(e) {
          $(this).addClass('hiding out').removeClass('in2');
          setTimeout(function() {
            $('.out').addClass('hidden');
          }, 300);
        });

        $("#list2 li:containsi('" + searchSplit + "')").each(function(e) {
          $(this).removeClass('hidden out').addClass('in2');
          setTimeout(function() {
            $('.in2').removeClass('hiding');
          }, 1);
        });

        var jobCount = $('#list2 .in2').length - 1;
        $('.list-count2').text(jobCount + ' items');

        //shows empty state text when no jobs found
        if (jobCount == '0') {
          $('#list2').addClass('empty');
        } else {
          $('#list2').removeClass('empty');
        }

      });
    });
     .customAccordion {
      color: #f4f4f4;
      cursor: pointer;
      width: 100%;
      border: none;
      text-align: center;
      outline: none;
      transition: 0.5s;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      padding: 5px;
      border-radius: 50px;
      justify-content: space-between;
    }

    .active,
    .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 0px;
      background-color: #fff;
      max-height: 40px;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      border: none;
      box-shadow: rgb(33 35 38 / 50%) 0px 10px 10px -10px;
      border-radius: 50px;
    }

    .colPadding {
      padding: 20px;
    }

    .chartTitle,
    .chartTitle:hover {
      color: #f4f4f4;
      font-size: 14px;
      letter-spacing: 3px;
      margin: 0px;
    }

    .chartViewAll,
    .chartViewAll:hover {
      color: #f4f4f4 !important;
      font-size: 12px;
      letter-spacing: 3px;
      margin: 0px;
    }

    .yellowHues,
    .yellowHues:active {
      background-color: #d7b327 !important;
    }

    .orangeHues,
    .orangeHues:active {
      background-color: #ff7700 !important;
    }

    .redHues,
    .redHues:active {
      background-color: #d64818 !important;
    }

    .violetHues,
    .violetHues:active {
      background-color: #8b1892 !important;
    }

    .blueHues,
    .blueHues:active {
      background-color: #0d2791 !important;
    }

    .greenHues,
    .greenHues:active {
      background-color: #1e7f16 !important;
    }

    .greyHues,
    .greyHues:active {
      background-color: #888888 !important;
    }

    .brownHues,
    .brownHues:active {
      background-color: #6c4a11 !important;
    }

    .whiteAndBlackHues,
    .whiteAndBlackHues:active {
      background-color: #000000 !important;
    }

    .chartIcon {
      fill: #f4f4f4;
      height: 20px;
    }

    .block-center {
      margin: 0 auto;
    }

    .color-picker {
      width: 100%;
      min-height: 0px;
      padding: 5px 20px 5px 15px;
    }

    .color-list {
      list-style: none;
      padding: 0;
      text-align: center;
    }

    .color-list li {
      display: inline-block;
      margin-top: 5px;
      margin-right: 30px;
      margin-left: 30px;
    }

    .color {
      height: 20px;
      width: 20px;
      border-radius: 100px;
      background-color: attr(data-color);
      transition: transform 0.3s;
    }

    .color:not(.active):hover {
      cursor: pointer;
    }

    .form-control {
      display: block;
      width: 100%;
      border-radius: 3px;
      border: 1px solid #D7D1D5;
      margin-top: 5px;
      margin-bottom: 15px;
      padding: 5px 0px 10px 5px;
      font-size: 18px;
      line-height: 1.75;
    }

    .ralChartAccordionDiv {
      padding-top: 30px;
      padding-bottom: 30px;
    }

    .colorPickerCol {
      display: flex;
      justify-content: center;
    }

    .ral-chart-form {
      pointer-events: none;
    }

    .color:not(.active) p {
      cursor: pointer;
      visibility: hidden;
    }

    .color:not(.active):hover p {
      cursor: pointer;
      visibility: visible;
    }

    #search-text {
      border-radius: 50px;
      border-color: #2b2b2b;
      color: #2b2b2b;
      background-color: #fff;
      padding: 5px;
      font-size: 14px;
      text-align: center;
    }

     ::placeholder {
      color: #2b2b2b;
      opacity: 1;
      /* Firefox */
    }

     :-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #2b2b2b;
    }

     ::-ms-input-placeholder {
      /* Microsoft Edge */
      color: #2b2b2b;
    }

    svg.bi.bi-search {
      fill: #2b2b2b;
      height: 15px;
      position: absolute;
      margin-left: -55px;
      margin-top: 10px;
    }

    @media (max-width: 428px) {
      svg.bi.bi-search {
        display: none;
      }
    }

    .hidden {
      display: none !important;
    }
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul id="list1">
      <li class="in1">

        <div class="customAccordion yellowHues">
          <p class="chartTitle">Yellow Hues</p>
          <p class="chartViewAll">View All -
            <span class="list-count1"></span>
            <svg class="chartIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-arrow-down-short" viewBox="0 0 16 16">
                                          <path
                                                d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" />
                                    </svg>
          </p>
        </div>

        <div class="panel">

          <div class="color-picker block-center">
            <ul class="color-list">

              <li class="color in1" data-color="#cdba88" data-name="RAL 1000">
                <p class="ral-1000">RAL 1000</p>
              </li>

              <li class="color in1" data-color="#d0b084" data-name="RAL 1001">
                <p class="ral-1001">RAL 1001</p>
              </li>

              <li class="color in1" data-color="#d2aa6d" data-name="RAL 1002">
                <p class="ral-1002">RAL 1002</p>
              </li>

              <li class="color in1" data-color="#f9a800" data-name="RAL 1003">
                <p class="ral-1003">RAL 1003</p>
              </li>

              <li class="color in1" data-color="#e49e00" data-name="RAL 1004">
                <p class="ral-1004">RAL 1004</p>
              </li>

              <li class="color in1" data-color="#cb8e00" data-name="RAL 1005">
                <p class="ral-1005">RAL 1005</p>
              </li>

              <li class="color in1" data-color="#e29000" data-name="RAL 1006">
                <p class="ral-1006">RAL 1006</p>
              </li>

              <li class="color in1" data-color="#e88c00" data-name="RAL 1007">
                <p class="ral-1007">RAL 1007</p>
              </li>

              <li class="color in1" data-color="#af804f" data-name="RAL 1011">
                <p class="ral-1011">RAL 1011</p>
              </li>

              <li class="color in1" data-color="#ddaf27" data-name="RAL 1012">
                <p class="ral-1012">RAL 1012</p>
              </li>

              <li class="color in1" data-color="#e3d9c6" data-name="RAL 1013">
                <p class="ral-1013">RAL 1013</p>
              </li>

              <li class="color in1" data-color="#ddc49a" data-name="RAL 1014">
                <p class="ral-1014">RAL 1014</p>
              </li>

              <li class="color in1" data-color="#e6d2b5" data-name="RAL 1015">
                <p class="ral-1015">RAL 1015</p>
              </li>

              <li class="color in1" data-color="#f1dd38" data-name="RAL 1016">
                <p class="ral-1016">RAL 1016</p>
              </li>

              <li class="color in1" data-color="#f6a950" data-name="RAL 1017">
                <p class="ral-1017">RAL 1017</p>
              </li>

              <li class="color in1" data-color="#faca30" data-name="RAL 1018">
                <p class="ral-1018">RAL 1018</p>
              </li>

              <li class="color in1" data-color="#a48f7a" data-name="RAL 1019">
                <p class="ral-1019">RAL 1019</p>
              </li>

              <li class="color in1" data-color="#a08f65" data-name="RAL 1020">
                <p class="ral-1020">RAL 1020</p>
              </li>

              <li class="color in1" data-color="#f6b600" data-name="RAL 1021">
                <p class="ral-1021">RAL 1021</p>
              </li>

              <li class="color in1" data-color="#f7b500" data-name="RAL 1023">
                <p class="ral-1023">RAL 1023</p>
              </li>

              <li class="color in1" data-color="#ba8f4c" data-name="RAL 1024">
                <p class="ral-1024">RAL 1024</p>
              </li>

              <li class="color in1" data-color="#ffff00" data-name="RAL 1026">
                <p class="ral-1026">RAL 1026</p>
              </li>

              <li class="color in1" data-color="#a77f0e" data-name="RAL 1027">
                <p class="ral-1027">RAL 1027</p>
              </li>

              <li class="color in1" data-color="#ff9b00" data-name="RAL 1028">
                <p class="ral-1028">RAL 1028</p>
              </li>

              <li class="color in1" data-color="#e2a300" data-name="RAL 1032">
                <p class="ral-1032">RAL 1032</p>
              </li>

              <li class="color in1" data-color="#f99a1c" data-name="RAL 1033">
                <p class="ral-1033">RAL 1033</p>
              </li>

              <li class="color in1" data-color="#eb9c52" data-name="RAL 1034">
                <p class="ral-1034">RAL 1034</p>
              </li>

              <li class="color in1" data-color="#908370" data-name="RAL 1035">
                <p class="ral-1035">RAL 1035</p>
              </li>

              <li class="color in1" data-color="#80643f" data-name="RAL 1036">
                <p class="ral-1036">RAL 1036</p>
              </li>

              <li class="color in1" data-color="#f09200" data-name="RAL 1037">
                <p class="ral-1037">RAL 1037</p>
              </li>

            </ul>

          </div>
        </div>


      </li>
    </ul>

    <div class="colPadding"></div>


    <ul id="list2">
      <li class="in2">

        <div class="customAccordion orangeHues">
          <p class="chartTitle">Orange Hues</p>
          <p class="chartViewAll">View All -
            <span class="list-count2"></span>
            <svg class="chartIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-arrow-down-short" viewBox="0 0 16 16">
                                      <path
                                            d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" />
                                </svg>
          </p>
        </div>

        <div class="panel">

          <div class="color-picker block-center">
            <ul class="color-list">

              <li class="color in2" data-color="#EEA205" data-name="RAL 2000">
                <p class="ral-2000">RAL 2000</p>
              </li>

              <li class="color in2" data-color="#DD7907" data-name="RAL 2001">
                <p class="ral-2001">RAL 2001</p>
              </li>

              <li class="color in2" data-color="#BE4E20" data-name="RAL 2002">
                <p class="ral-2002">RAL 2002</p>
              </li>

              <li class="color in2" data-color="#C63927" data-name="RAL 2003">
                <p class="ral-2003">RAL 2003</p>
              </li>

              <li class="color in2" data-color="#FA842B" data-name="RAL 2004">
                <p class="ral-2004">RAL 2004</p>
              </li>

              <li class="color in2" data-color="#E75B12" data-name="RAL 2005">
                <p class="ral-2005">RAL 2005</p>
              </li>

              <li class="color in2" data-color="#FF2300" data-name="RAL 2007">
                <p class="ral-2007">RAL 2007</p>
              </li>

              <li class="color in2" data-color="#FFA421" data-name="RAL 2008">
                <p class="ral-2008">RAL 2008</p>
              </li>

              <li class="color in2" data-color="#F3752C" data-name="RAL 2009">
                <p class="ral-2009">RAL 2009</p>
              </li>

              <li class="color in2" data-color="#E15501" data-name="RAL 2010">
                <p class="ral-2010">RAL 2010</p>
              </li>

              <li class="color in2" data-color="#D4652F" data-name="RAL 2011">
                <p class="ral-2011">RAL 2011</p>
              </li>

              <li class="color in2" data-color="#EC7C25" data-name="RAL 2012">
                <p class="ral-2012">RAL 2012</p>
              </li>

              <li class="color in2" data-color="#DB6A50" data-name="RAL 2013">
                <p class="ral-2013">RAL 2013</p>
              </li>

            </ul>

          </div>
        </div>



      </li>
    </ul>

    <div class="colPadding"></div>

    <input id="options_1010_text">
    <input id="options_1011_text">





    <div class="customAccordion orangeHues">
                          <p class="chartTitle">Orange Hues</p>
                          <p class="chartViewAll">View All - 
                                <span class="list-count2"></span>
                                <svg class="chartIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                      class="bi bi-arrow-down-short" viewBox="0 0 16 16">
                                      <path
                                            d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" />
                                </svg>
                          </p>
                    </div>
    
    <div class="panel">
    
          <div class="color-picker block-center">
                <ul class="color-list">
    
                      <li class="color in2" data-color="#EEA205" data-name="RAL 2000">
                        <p class="ral-2000">RAL 2000</p>
                      </li>
                  
                      <li class="color in2" data-color="#DD7907" data-name="RAL 2001">
                        <p class="ral-2001">RAL 2001</p>
                      </li>
                  
                </ul>
    
          </div>
    </div>

    <div class="customAccordion yellowHues">
                              <p class="chartTitle">Yellow Hues</p>
                              <p class="chartViewAll">View All - 
                                    <span class="list-count1"></span>
                                    <svg class="chartIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                          class="bi bi-arrow-down-short" viewBox="0 0 16 16">
                                          <path
                                                d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" />
                                    </svg>
                              </p>
                        </div>
        
        
        <div class="panel">
        
              <div class="color-picker block-center">
                    <ul class="color-list">
        
                          <li class="color in1" data-color="#cdba88" data-name="RAL 1000">
                            <p class="ral-1000">RAL 1000</p>
                          </li>
                      
                          <li class="color in1" data-color="#d0b084" data-name="RAL 1001">
                            <p class="ral-1001">RAL 1001</p>
                          </li>
                      
                        
                    </ul>
        
              </div>
        </div>
    





   

     <script>
        var selector = '.color-list .color';
        $(".color").css('background', function () { 
            return $(this).data('color');
        });
        
        $(selector).on('click', function(){
          var colorName = $(this).data('name');
          var colorHEX = $(this).data('color');
          $(selector).removeClass('active');
          $(this).addClass('');
          $('#options_1010_text').val(colorName);
          $('#test-bg').css('background-color',colorHEX);
          
        });
        </script>
        
        
          <script>
            var acc = document.getElementsByClassName("customAccordion");
            var i;
            
            for (i = 0; i < acc.length; i++) {
              acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight) {
                  panel.style.maxHeight = null;
                } else {
                  panel.style.maxHeight = panel.scrollHeight + "px";
                } 
              });
            }
            </script>

有一百万种方法可以做到这一点，其中一种是在某处存储一个输入ID值，我把它放在了最近的列表元素中，如果你不想硬编码ID，你也可以通过索引来定位输入，引用列表索引。
我还调整了你的CSS来修复水平溢出。

var selector = '.color-list .color';

$(".color").css('background', function() {
  return $(this).data('color');
});

$(selector).on('click', function() {
  var colorName = $(this).data('name');
  var colorHEX = $(this).data('color');
  $(selector).removeClass('active');
  $(this).addClass('');
  $($(this).closest('ul').data('input')).val(colorName);
  $('#test-bg').css('background-color', colorHEX);
});

var acc = document.getElementsByClassName("customAccordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

$(document).ready(function() {

  var jobCount = $('#list1 .in1').length - 1;
  $('.list-count1').text(jobCount + ' items');

  $("#search-text").keyup(function() {
    //$(this).addClass('hidden');

    var searchTerm = $("#search-text").val();
    var listItem = $('#list1').children('li');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

    //extends :contains to be case insensitive
    $.extend($.expr[':'], {
      'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase()
          .indexOf((match[3] || "").toLowerCase()) >= 0;
      }
    });

    $("#list1 .color-list li").not(":containsi('" + searchSplit + "')").each(function(e) {
      $(this).addClass('hiding out').removeClass('in1');
      setTimeout(function() {
        $('.out').addClass('hidden');
      }, 300);
    });

    $("#list1 li:containsi('" + searchSplit + "')").each(function(e) {
      $(this).removeClass('hidden out').addClass('in1');
      setTimeout(function() {
        $('.in1').removeClass('hiding');
      }, 1);
    });

    var jobCount = $('#list1 .in1').length - 1;
    $('.list-count1').text(jobCount + ' items');

    //shows empty state text when no jobs found
    if (jobCount == '0') {
      $('#list1').addClass('empty');
    } else {
      $('#list1').removeClass('empty');
    }
  });
});

$(document).ready(function() {
  var jobCount = $('#list2 .in2').length - 1;
  $('.list-count2').text(jobCount + ' items');

  $("#search-text").keyup(function() {
    //$(this).addClass('hidden');

    var searchTerm = $("#search-text").val();
    var listItem = $('#list2').children('li');

    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

    //extends :contains to be case insensitive
    $.extend($.expr[':'], {
      'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase()
          .indexOf((match[3] || "").toLowerCase()) >= 0;
      }
    });

    $("#list2 .color-list li").not(":containsi('" + searchSplit + "')").each(function(e) {
      $(this).addClass('hiding out').removeClass('in2');
      setTimeout(function() {
        $('.out').addClass('hidden');
      }, 300);
    });

    $("#list2 li:containsi('" + searchSplit + "')").each(function(e) {
      $(this).removeClass('hidden out').addClass('in2');
      setTimeout(function() {
        $('.in2').removeClass('hiding');
      }, 1);
    });

    var jobCount = $('#list2 .in2').length - 1;
    $('.list-count2').text(jobCount + ' items');

    //shows empty state text when no jobs found
    if (jobCount == '0') {
      $('#list2').addClass('empty');
    } else {
      $('#list2').removeClass('empty');
    }
  });
});

.picker-list {
  list-style-type: none;
  padding-left: 0;
}

.customAccordion {
  color: #f4f4f4;
  cursor: pointer;
  /* width: 100%; */
  border: none;
  text-align: center;
  outline: none;
  transition: 0.5s;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 50px;
  justify-content: space-between;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 0px;
  background-color: #fff;
  max-height: 40px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border: none;
  box-shadow: rgb(33 35 38 / 50%) 0px 10px 10px -10px;
  border-radius: 50px;
}

.colPadding {
  padding: 20px;
}

.chartTitle,
.chartTitle:hover {
  color: #f4f4f4;
  font-size: 14px;
  letter-spacing: 3px;
  margin: 0px;
}

.chartViewAll,
.chartViewAll:hover {
  color: #f4f4f4 !important;
  font-size: 12px;
  letter-spacing: 3px;
  margin: 0px;
}

.yellowHues,
.yellowHues:active {
  background-color: #d7b327 !important;
}

.orangeHues,
.orangeHues:active {
  background-color: #ff7700 !important;
}

.redHues,
.redHues:active {
  background-color: #d64818 !important;
}

.violetHues,
.violetHues:active {
  background-color: #8b1892 !important;
}

.blueHues,
.blueHues:active {
  background-color: #0d2791 !important;
}

.greenHues,
.greenHues:active {
  background-color: #1e7f16 !important;
}

.greyHues,
.greyHues:active {
  background-color: #888888 !important;
}

.brownHues,
.brownHues:active {
  background-color: #6c4a11 !important;
}

.whiteAndBlackHues,
.whiteAndBlackHues:active {
  background-color: #000000 !important;
}

.chartIcon {
  fill: #f4f4f4;
  height: 20px;
}

.block-center {
  margin: 0 auto;
}

.color-picker {
  width: 100%;
  min-height: 0px;
  padding: 5px 20px 5px 15px;
}

.color-list {
  list-style: none;
  padding: 0;
  text-align: center;
}

.color-list li {
  display: inline-block;
  margin-top: 5px;
  margin-right: 30px;
  margin-left: 30px;
}

.color {
  height: 20px;
  width: 20px;
  border-radius: 100px;
  background-color: attr(data-color);
  transition: transform 0.3s;
}

.color:not(.active):hover {
  cursor: pointer;
}

.form-control {
  display: block;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D7D1D5;
  margin-top: 5px;
  margin-bottom: 15px;
  padding: 5px 0px 10px 5px;
  font-size: 18px;
  line-height: 1.75;
}

.ralChartAccordionDiv {
  padding-top: 30px;
  padding-bottom: 30px;
}

.colorPickerCol {
  display: flex;
  justify-content: center;
}

.ral-chart-form {
  pointer-events: none;
}

.color:not(.active) p {
  cursor: pointer;
  visibility: hidden;
}

.color:not(.active):hover p {
  cursor: pointer;
  visibility: visible;
}

#search-text {
  border-radius: 50px;
  border-color: #2b2b2b;
  color: #2b2b2b;
  background-color: #fff;
  padding: 5px;
  font-size: 14px;
  text-align: center;
}

 ::placeholder {
  color: #2b2b2b;
  opacity: 1;
  /* Firefox */
}

 :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #2b2b2b;
}

 ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #2b2b2b;
}

svg.bi.bi-search {
  fill: #2b2b2b;
  height: 15px;
  position: absolute;
  margin-left: -55px;
  margin-top: 10px;
}

@media (max-width: 428px) {
  svg.bi.bi-search {
    display: none;
  }
}

.hidden {
  display: none !important;
}

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

<ul id="list1" class="picker-list">
  <li class="in1">
    <div class="customAccordion yellowHues">
      <p class="chartTitle">Yellow Hues</p>
      <p class="chartViewAll">View All -
        <span class="list-count1"></span>
        <svg class="chartIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-arrow-down-short" viewBox="0 0 16 16">
              <path
                    d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" />
        </svg>
      </p>
    </div>

    <div class="panel">
      <div class="color-picker block-center">
        <ul class="color-list" data-input="#options_1010_text">
          <li class="color in1" data-color="#cdba88" data-name="RAL 1000">
            <p class="ral-1000">RAL 1000</p>
          </li>

          <li class="color in1" data-color="#d0b084" data-name="RAL 1001">
            <p class="ral-1001">RAL 1001</p>
          </li>

          <li class="color in1" data-color="#d2aa6d" data-name="RAL 1002">
            <p class="ral-1002">RAL 1002</p>
          </li>

          <li class="color in1" data-color="#f9a800" data-name="RAL 1003">
            <p class="ral-1003">RAL 1003</p>
          </li>

          <li class="color in1" data-color="#e49e00" data-name="RAL 1004">
            <p class="ral-1004">RAL 1004</p>
          </li>

          <li class="color in1" data-color="#cb8e00" data-name="RAL 1005">
            <p class="ral-1005">RAL 1005</p>
          </li>

          <li class="color in1" data-color="#e29000" data-name="RAL 1006">
            <p class="ral-1006">RAL 1006</p>
          </li>

          <li class="color in1" data-color="#e88c00" data-name="RAL 1007">
            <p class="ral-1007">RAL 1007</p>
          </li>

          <li class="color in1" data-color="#af804f" data-name="RAL 1011">
            <p class="ral-1011">RAL 1011</p>
          </li>

          <li class="color in1" data-color="#ddaf27" data-name="RAL 1012">
            <p class="ral-1012">RAL 1012</p>
          </li>

          <li class="color in1" data-color="#e3d9c6" data-name="RAL 1013">
            <p class="ral-1013">RAL 1013</p>
          </li>

          <li class="color in1" data-color="#ddc49a" data-name="RAL 1014">
            <p class="ral-1014">RAL 1014</p>
          </li>

          <li class="color in1" data-color="#e6d2b5" data-name="RAL 1015">
            <p class="ral-1015">RAL 1015</p>
          </li>

          <li class="color in1" data-color="#f1dd38" data-name="RAL 1016">
            <p class="ral-1016">RAL 1016</p>
          </li>

          <li class="color in1" data-color="#f6a950" data-name="RAL 1017">
            <p class="ral-1017">RAL 1017</p>
          </li>

          <li class="color in1" data-color="#faca30" data-name="RAL 1018">
            <p class="ral-1018">RAL 1018</p>
          </li>

          <li class="color in1" data-color="#a48f7a" data-name="RAL 1019">
            <p class="ral-1019">RAL 1019</p>
          </li>

          <li class="color in1" data-color="#a08f65" data-name="RAL 1020">
            <p class="ral-1020">RAL 1020</p>
          </li>

          <li class="color in1" data-color="#f6b600" data-name="RAL 1021">
            <p class="ral-1021">RAL 1021</p>
          </li>

          <li class="color in1" data-color="#f7b500" data-name="RAL 1023">
            <p class="ral-1023">RAL 1023</p>
          </li>

          <li class="color in1" data-color="#ba8f4c" data-name="RAL 1024">
            <p class="ral-1024">RAL 1024</p>
          </li>

          <li class="color in1" data-color="#ffff00" data-name="RAL 1026">
            <p class="ral-1026">RAL 1026</p>
          </li>

          <li class="color in1" data-color="#a77f0e" data-name="RAL 1027">
            <p class="ral-1027">RAL 1027</p>
          </li>

          <li class="color in1" data-color="#ff9b00" data-name="RAL 1028">
            <p class="ral-1028">RAL 1028</p>
          </li>

          <li class="color in1" data-color="#e2a300" data-name="RAL 1032">
            <p class="ral-1032">RAL 1032</p>
          </li>

          <li class="color in1" data-color="#f99a1c" data-name="RAL 1033">
            <p class="ral-1033">RAL 1033</p>
          </li>

          <li class="color in1" data-color="#eb9c52" data-name="RAL 1034">
            <p class="ral-1034">RAL 1034</p>
          </li>

          <li class="color in1" data-color="#908370" data-name="RAL 1035">
            <p class="ral-1035">RAL 1035</p>
          </li>

          <li class="color in1" data-color="#80643f" data-name="RAL 1036">
            <p class="ral-1036">RAL 1036</p>
          </li>

          <li class="color in1" data-color="#f09200" data-name="RAL 1037">
            <p class="ral-1037">RAL 1037</p>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

<div class="colPadding"></div>

<ul id="list2" class="picker-list">
  <li class="in2">
    <div class="customAccordion orangeHues">
      <p class="chartTitle">Orange Hues</p>
      <p class="chartViewAll">View All -
        <span class="list-count2"></span>
        <svg class="chartIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-arrow-down-short" viewBox="0 0 16 16">
              <path
                    d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" />
        </svg>
      </p>
    </div>

    <div class="panel">
      <div class="color-picker block-center">
        <ul class="color-list" data-input="#options_1011_text">
          <li class="color in2" data-color="#EEA205" data-name="RAL 2000">
            <p class="ral-2000">RAL 2000</p>
          </li>

          <li class="color in2" data-color="#DD7907" data-name="RAL 2001">
            <p class="ral-2001">RAL 2001</p>
          </li>

          <li class="color in2" data-color="#BE4E20" data-name="RAL 2002">
            <p class="ral-2002">RAL 2002</p>
          </li>

          <li class="color in2" data-color="#C63927" data-name="RAL 2003">
            <p class="ral-2003">RAL 2003</p>
          </li>

          <li class="color in2" data-color="#FA842B" data-name="RAL 2004">
            <p class="ral-2004">RAL 2004</p>
          </li>

          <li class="color in2" data-color="#E75B12" data-name="RAL 2005">
            <p class="ral-2005">RAL 2005</p>
          </li>

          <li class="color in2" data-color="#FF2300" data-name="RAL 2007">
            <p class="ral-2007">RAL 2007</p>
          </li>

          <li class="color in2" data-color="#FFA421" data-name="RAL 2008">
            <p class="ral-2008">RAL 2008</p>
          </li>

          <li class="color in2" data-color="#F3752C" data-name="RAL 2009">
            <p class="ral-2009">RAL 2009</p>
          </li>

          <li class="color in2" data-color="#E15501" data-name="RAL 2010">
            <p class="ral-2010">RAL 2010</p>
          </li>

          <li class="color in2" data-color="#D4652F" data-name="RAL 2011">
            <p class="ral-2011">RAL 2011</p>
          </li>

          <li class="color in2" data-color="#EC7C25" data-name="RAL 2012">
            <p class="ral-2012">RAL 2012</p>
          </li>

          <li class="color in2" data-color="#DB6A50" data-name="RAL 2013">
            <p class="ral-2013">RAL 2013</p>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

<div class="colPadding"></div>

<input id="options_1010_text">
<input id="options_1011_text">

css 如何从颜色选择器中为输入框指定不同的值？

1条答案

相关问题

热门标签

最新问答