在 bootstrap 4 中隐藏范围输入按钮?
Hide range input button in bootstrap 4?
我有以下 html 代码:
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
我从 bootstrap 4 文档 (https://getbootstrap.com/docs/4.1/components/forms/#range-inputs) 借来的,并产生以下内容:
我想隐藏按钮直到有人点击该行。我们能做到吗?
Ps。我想在我的 oTree 代码中使用这个范围输入:
<label class="col-form-label">
Pizza is the best food:
</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disagree</span>
</div>
<input type="range" name="pizza" min="1" max="5" step="1" class="form-control">
<div class="input-group-append">
<span class="input-group-text">Agree</span>
</div>
</div>
从 oTree 文档中借用:https://otree.readthedocs.io/en/latest/forms.html#widgets
一个没有 JavaScript 和 html/css 的可能解决方案:
<label class="col-form-label">
Pizza is the best food:
</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disagree</span>
</div>
<div class="range">
<input type="range" name="pizza" min="1" max="5" step="1" class="form-control
range-input">
</div>
<div class="input-group-append">
<span class="input-group-text">Agree</span>
</div>
</div>
删除了平台原生样式并添加了一些自定义样式。希望你也能用它做点什么
.range-input {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 26px;
height: 10px;
width: 170px;
background-color: rgb(74, 123, 197);
}
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
width: 0;
height: 0;
}
.range:active .range-input::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
border: 1px solid blue;
border-radius: 50%;
background: #fff;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}
我有以下 html 代码:
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
我从 bootstrap 4 文档 (https://getbootstrap.com/docs/4.1/components/forms/#range-inputs) 借来的,并产生以下内容:
我想隐藏按钮直到有人点击该行。我们能做到吗?
Ps。我想在我的 oTree 代码中使用这个范围输入:
<label class="col-form-label">
Pizza is the best food:
</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disagree</span>
</div>
<input type="range" name="pizza" min="1" max="5" step="1" class="form-control">
<div class="input-group-append">
<span class="input-group-text">Agree</span>
</div>
</div>
从 oTree 文档中借用:https://otree.readthedocs.io/en/latest/forms.html#widgets
一个没有 JavaScript 和 html/css 的可能解决方案:
<label class="col-form-label">
Pizza is the best food:
</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Disagree</span>
</div>
<div class="range">
<input type="range" name="pizza" min="1" max="5" step="1" class="form-control
range-input">
</div>
<div class="input-group-append">
<span class="input-group-text">Agree</span>
</div>
</div>
删除了平台原生样式并添加了一些自定义样式。希望你也能用它做点什么
.range-input {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 26px;
height: 10px;
width: 170px;
background-color: rgb(74, 123, 197);
}
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
width: 0;
height: 0;
}
.range:active .range-input::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
border: 1px solid blue;
border-radius: 50%;
background: #fff;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}