将输入定位在div内旋转90度

Question

我通过javascript使输入范围垂直，如下所示：

var range_pitch = document.createElement("input");
range_pitch.setAttribute("type", "range");
range_pitch.style.webkitTransform = "rotate(90deg)";
range_pitch.style.mozTransform = "rotate(90deg)";
range_pitch.style.oTransform = "rotate(90deg)";
range_pitch.style.msTransform = "rotate(90deg)";
range_pitch.style.transform = "rotate(90deg)";

但是我不能把它放到创建的<div> （对我来说不起作用）：

vertical_slider.appendChild( range_pitch );
document.body.appendChild( vertical_slider );

这是我的小提琴

请问有什么解决方案吗？

Answer 1

固定小提琴

检查浏览器控制台中的DOM，您可以看到input已经在div ，您应该只调整CSS，查看下面的示例。

希望这可以帮助。

---

  var vertical_slider = document.createElement('div'); vertical_slider.id = 'vertical_slider'; var osa_y_panorama = 0.6; var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)"; range_pitch.style.oTransform = "rotate(90deg)"; range_pitch.style.msTransform = "rotate(90deg)"; range_pitch.style.transform = "rotate(90deg)"; range_pitch.min = "0"; range_pitch.max = "218"; range_pitch.step = "0.6"; range_pitch.defaultValue = osa_y_panorama; vertical_slider.appendChild( range_pitch ); document.body.appendChild( vertical_slider ); 

 #vertical_slider { float: left; width: 40px; height: 218px; border: 1px solid blue; } input{ position: relative; top:93px; right: 83px; width:200px; } 

Answer 2

问题来自你的css旋转到输入，如果你检查DOM，你的元素在里面，但旋转使它看起来在外面。

您可以使用此css进行热修复：

input {
  position: relative;
  right: 70px;
  top: 100px;
}