CSS giriş aralığı başparmak nasıl görünmez?

Question

Bir gıda bağımlılığı anketi yapıyorum ve şu gibi görünen bir girdi aralığına ihtiyacım var: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/'dan range input.

Sorum şu: Başlığı en az bir kez tıklayana kadar nasıl görünmeyebilir? Bu, anket için önemlidir, böylece veriler orada bulunmasından etkilenmez. İşte

Başparmak CSS (yukarıdaki bağlantıdan kalanını görebilir): Sen kısmen Javascript ekleyebilirsiniz

/* Special styling for WebKit/Blink */ 
    input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ 
} 

/* All the same stuff for Firefox */ 
input[type=range]::-moz-range-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 

/* All the same stuff for IE */ 
input[type=range]::-ms-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 

Answer 1

Bu kromda fiddle çalışır, parça için stiller eklemek zorunda kaldım. Başlığı siz tıklayana kadar gizlenir ve tıklandığında görünür. Bu jQuery kullanır ve ben sadece krom uygulanan ne çalıştı.

HTML:

<input type="range" class='not-clicked'> 

JavaScript:

$('.not-clicked').click(function(e){ 
    $(this).removeClass('not-clicked'); 
    $(this).addClass('clicked'); 
}); 

CSS:

.not-clicked::-webkit-slider-thumb{ 
    display:none; 
} 
.clicked::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ 
} 

Answer 2

. Başparmak kısmını kimliğiyle seçin ve yükleme sayfasında gizleyin. Daha sonra, bir tıklama dinleyici ekleyin ve başparmak gösterisi durumuna zaten değilse, bunu göstermek:

var hidden = true; 
var thumb = document.getElementsById("thumb"); 
thumb.hide(); 
var bt = document.getElementsById("validate"); 
bt.on("click",function(){...}); 
//etc 

Test edilmedi. Daha fazla isterseniz, lütfen bir fiddleJS bağlantısı sağlayın.