使用CSS将输入值旋转90度

Question

我有一个提交按钮,其文本需要旋转.但是,我似乎只能解决如何旋转整个提交按钮而不仅仅是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中的所需位置(直接位于textarea的右侧).有足够的空间,但是margin-top:-XYZem只添加按钮一点点,然后停止.

这是一个实时版本,所以你明白了

当我没有完成旋转时,按钮很容易定位; 是否可以仅旋转按钮上的文本值,而不是整个按钮本身？

Answer 1

把输入放在div中并自定义你的风格

HTML代码:

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

css风格:

.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;
}