使用CSS將輸入的值旋轉90度

我有一個提交按鈕，其文本需要旋轉。但是，我似乎只能解決如何旋轉整個提交按鈕，而不是僅僅調整VALUE。使用CSS將輸入的值旋轉90度

我使用的是旋轉的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只將按鈕向上推動一下，然後停止。

Here's a live version so you get the idea

按鈕很容易定位的時候我沒有做過旋轉;是否可以僅旋轉坐在按鈕上的文本值，而不是整個按鈕本身？在DIV

來源

2012-01-17 Jascination

放輸入和自定義你的風格

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

來源

2012-01-17 09:41:01 Abudayah

正確的是，使用'.button' div來定位按鈕並將背景顏色/填充/等全部放在輸入本身上會更容易。隊友的歡呼聲！ – Jascination 2012-01-17 10:00:05

我覺得這是什麼ü需要：

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

來源

2012-01-17 09:52:57 Kannika

使用CSS將輸入的值旋轉90度

回答

相關問題