使用CSS将输入值旋转90度 [英] Using CSS to rotate an input's value 90 degrees

问题描述

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

I have a submit button whose text needs to be rotated. However, I can only seem to work out how to rotate the entire submit button rather than just the VALUE.

我用来旋转的CSS很简单:

The CSS I'm using to rotate is simply:

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

，提交按钮的整个CSS是:

and the whole CSS for the submit button is:

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

您可能会猜到，这适用于整个提交"按钮，因此整个过程都是旋转的(因此，为什么我交换了height/width属性以使其成为细的竖线，请参见下图).

As you can guess, this applies to the entire submit button, so the whole thing is rotated (hence why I've swapped the height/width attributes to make it a thin vertical bar, see image below).

问题是，这使按钮的位置确实很奇怪，而我无法将其移至div中的所需位置(该位置直接在文本区域的右侧).还有足够的空间，但是添加margin-top:-XYZem仅将按钮向上推一点，然后停止.

The Problem is that this makes the button position really weirdly, and I can't get it to the desired position in the div (which is directly to the right of the textarea). There is more than ample room, however adding margin-top:-XYZem only pushes the button up a little bit, and then stops.

这是一个实时版本，您可以理解它

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

The button is very easy to position when I haven't done the rotation; is it possible to rotate ONLY the text value that sits on the button, and not the entire button itself?

推荐答案

将输入内容放入div并自定义样式

put input in div and customize your style

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

这篇关于使用CSS将输入值旋转90度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！