Блог

Главная - Вопросы по программированию - Выпадающий список только с тремя цветами

Выпадающий список только с тремя цветами

#html #css

#HTML #css — код

Вопрос:

Мне удалось установить три цвета для выпадающего списка цветов типа ввода, но мне нужно отобразить только три выбранных цвета, а не все из них. Возможно ли это? Это мой код. Спасибо.

 <input type="color" list="presetColors" class="form-control">
            <datalist id="presetColors">
                <option>#ff0000</option>
                <option>#00ff00</option>
                <option>#0000ff</option>
            </datalist>

Ответ №1:

Я знаю, что это не ответ, но это решает проблему.

 let button = document.querySelectorAll(".button");
let palette = document.querySelectorAll(".palette");

for (let i = 0; i < button.length; i  ) {
  button[i].onclick = function() {
    palette[0].classList.remove("black", "blue", "red", "orange");
    palette[0].classList.add(button[i].className.split(" ")[0]);
  };
} 
 .container {
  display: flex;
}

.button {
  margin: 0.2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.black {
  background-color: black;
}

.orange {
  color: white;
  background-color: orange;
}

.palette {
  margin: 1rem 0 0 0;
  height: 1rem;
  width: 10rem;
  border-radius:10px;
} 
 <div class="container">
  <div class="black button"></div>
  <div class="blue button"></div>
  <div class="orange button"></div>
  <div class="red button"></div>
</div>
<div class="palette"></div>

Ответ №2:

Я изменил input select это на » а » . Затем передайте эту опцию классу и установите фон.

 select.form-control option.class1 { 
    /* Whatever color  you want */
    background-color: #ff0000;
}
select.form-control option.class2 { 
    /* Whatever color  you want */
    background-color: #00ff00;
}    
select.form-control option.class3 { 
    /* Whatever color  you want */
    background-color: #0000ff;
} 
 <select type="color" list="presetColors" class="form-control">
        <datalist id="presetColors">
            <option class="class1" >#ff0000</option>
            <option class="class2">#00ff00</option>
            <option class="class3">#0000ff</option>
        </datalist>
</select>

Комментарии:

1. Привет, Джулиан. Правильно, но, как вы можете заметить во фрагменте кода, он отображает три цвета и остальные цвета, доступные на палитре. Мне нужно показать только эти три цвета, чтобы пользователь мог выбрать только один из этих трех.

2. Вы были правы, пожалуйста, проверьте мой обновленный ответ

3. Спасибо, Джулиан. Нет, у меня это не работает. По крайней мере, в Safari и Chrome. Он просто отображает выделение с тремя шестнадцатеричными кодами в виде обычного текста.