Question

我正在建立一个允许用户更改温度的网站。

要更改温度值，我想使用范围滑块，但问题是该滑块不适合包装div内。

这是我的html：

<div class="col" id="controls">
     <div class="sectionTitle">    
          <span>Controls</span>
      </div>
      <div class="control">
           <div class="controlTitle">
                 place holder
           </div>
            <div>
                <input class="slider" type="range" min="0" max="100" /> 
            </div>      
       </div>
</div>

css：

.slider {
    width: 130px;
    height: 3px;
    border-radius: 1px;  
    background: rgb(87, 101, 226);
    opacity: 0.7;
    transition: opacity .2s;
    transform: rotate(90deg);
  }

  .slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgb(87, 101, 226);
    cursor: pointer;
  }

  .control{
       display: flex;
       flex-direction: row;
   }

现在我得到的是滑块脱离文件流，结果是：https://drive.google.com/open?id=19bsV2Bmd_xuJDwO0Z7eUhmtYEE3xdrTN

Answer 1

好像您正在旋转滑块以使其垂直，这是您想要的外观吗？如果没有，您能否删除那部分代码？

.slider {
    width: 130px;
    height: 3px;
    border-radius: 1px;  
    background: rgb(87, 101, 226);
    opacity: 0.7;
    transition: opacity .2s;
    transform: rotate(90deg); //remove this line
  }

如何在div中包装输入元素

1 个答案: