CODEWITHSUNDEEP
javascripthtmlcsscolor-pickerjscolor
nico
nico

Reputation: 175

How to not display the value

I am using jscolor to pick a color with an input.

I wanted to style it but I can't get rid of the hex value of the color choosen and I didn't find any documentation about options.

What I've tried : 

//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

Upvotes: 0

Views: 184

Answers (3)

Takit Isy
Takit Isy

Reputation: 10081

Your class wasn't applied due to your typo error.

Choose one of the following corrections:

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

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

⋅ ⋅ ⋅

Then, to make it properly aligned, you can just remove the top on the .checkbox element:

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

Updated fiddle: https://jsfiddle.net/7ayLhLpc/

Hope it helps!

Upvotes: 1

billy.farroll
billy.farroll

Reputation: 1921

Change the jscolor class, like so:

<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>

Upvotes: 1

StackedQ
StackedQ

Reputation: 4139

Change:

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

to: 

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

Upvotes: 1

Related Questions