使用 CSS 将输入值旋转 90 度

我有一个提交按钮，其文本需要旋转。但是，我似乎只能弄清楚如何旋转整个提交按钮而不仅仅是旋转VALUE.

我用来旋转的 CSS 很简单：

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

提交按钮的整个 CSS 是：

.form input[value="SUBMIT"] {
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
}

正如您可以猜到的，这适用于整个提交按钮，因此整个内容都会旋转（因此我交换了高度/宽度属性以使其成为细垂直条，请参见下图）。

问题是这使得按钮位置非常奇怪，我无法将其到达 div 中所需的位置（直接位于文本区域的右侧）。有足够的空间，但是添加margin-top:-XYZem只需将按钮向上推一点，然后停止。

这是一个现场版本，这样你就明白了 http://harrisonfjord.com/folio/contactTest.html

当我没有进行旋转时，按钮很容易定位；是否可以仅旋转按钮上的文本值，而不是整个按钮本身？

将输入放入 div 并自定义您的样式

.button{
/* write your style here*/
    background-color: #12E9F0;
    border: medium none;
    margin-right: 0;
    padding: 0.2em 0.6em;
}
.button input[type="submit"]{
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
    border:0 none;
    background:none;
}

<div class="button">
    <input type="submit" value="submit" />
</div>