Использование 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 (который находится справа от текстовой области).Существует более чем достаточно места, однако добавление margin-top:-XYZem лишь немного поднимает кнопку, а затем останавливается.

Вот живая версия, так что вы поймете идею

Кнопка очень легко позиционируется, когда я не сделал поворот;Можно ли вращать ТОЛЬКО текстовое значение, которое находится на кнопке, а не всю кнопку?

Answer 1

введите вход в div и настройте свой стиль

HTML-код:

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

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

Answer 2

Я думаю, это то, что тебе нужно:

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