如何使CSS输入范围拇指不首先出现 [英] How to make CSS input range thumb not appear at first

问题描述

我正在做一个食物成瘾调查，我需要一个看起来像这样的输入范围:范围输入来自 https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/.

I am making a food addiction survey and I need an input range that looks like this: range input from https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/.

我的问题是:如何使拇指部分至少被单击一次才出现?这对于调查很重要，这样数据就不会受到那里的影响.

My question is: How can I make the thumb portion not appear until it has been clicked on at least once? This is important for the survey so that the data is not influenced by it being there.

这是拇指的CSS(您可以在上面的链接中看到其余的内容):

Here is the CSS of the thumb (you can see the rest at the link above):

/* 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;
}

推荐答案

此 fiddle 可行在chrome中，我必须为曲目添加样式.拇指将一直隐藏，直到您单击范围为止，并且该拇指出现在单击的位置.这使用了jQuery，而我只研究了适用于chrome的内容.

This fiddle works in chrome, I had to add styles for the track. The thumb is hidden until you click the range and it appears where clicked. This uses jQuery and I only worked on what applied to chrome.

HTML:

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

JavaScript:

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! */
}

这篇关于如何使CSS输入范围拇指不首先出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！