Как не отображать значение

Question

Я использую jscolor , чтобы выбрать цвет с помощью ввода.

Я хотел его стилизовать, но не могу избавиться от шестнадцатеричного значения выбранного цвета, и я не сталне могу найти документацию по опциям.

Что я пробовал:

//It shows nothing
display: none 
//It works but then the dot isn't properly aligned
font-size:0 
//does nothing    
class="jscolor "{valueElement:null, value:"#e6e5f4"}

jsfiddle

Answer 1

Измените класс jscolor следующим образом:

<br><div id="cb">
        <ul class="list">
        <li class="list__item">
        <input id="CLR1" class="jscolor {valueElement:null, value:'#e6e5f4'}">
          <label class="label--checkbox">
            <input type="checkbox" class="checkbox" value="1">
                Must stay approximately aligned
          </label>
        </li>
        </ul>
    </div>

Answer 2

Ваш класс не был применен из-за вашей опечатки.

Выберите одно из следующих исправлений:

<input id="CLR1" class="jscolor {valueElement:null, value:'#e6e5f4'}"> (предпочтительно)

<input id="CLR1" class='jscolor {valueElement:null, value:"#e6e5f4"}'>

⋅ ⋅ ⋅

Затем, чтобы правильно выровнять его, можно просто удалить top на элементе .checkbox:

.checkbox {
  position: relative;
  /* top: -0.375rem; */
  margin: 0 1rem 0 0;
  cursor: pointer;
}

Обновленная скрипта: https://jsfiddle.net/7ayLhLpc/

Надеюсь, это поможет!

Answer 3

Изменение:

class="jscolor "{valueElement:null, value:"#e6e5f4"}

на:

class="jscolor {valueElement:null, value:'#e6e5f4'}"