CSS3再次傾斜！ ：無父母div的非糾錯文本，因此形成焦點狀態是合適的

Question

我有一個簡單的問題，但我可能會要求不可能。

我想將我的html表單元素設置爲平行四邊形而不會偏斜所包含的文本。

http://jsfiddle.net/ExUs9/3/

form { 
    background:#62CAD9; 
    padding:10px; 
} 
div { 
    background: white; 
    height: 30px; 
    margin: 10px; 
    width:300px; 
    transform:skewX(30deg); 
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg); 
} 
input { 
    background: none; 
    width: 100%; 
    height: 100%; 
    border: none; 
    transform:skewX(-30deg); 
    -ms-transform:skewX(-30deg); 
    -webkit-transform:skewX(-30deg); 
} 

我對上述問題是焦點屬性仍適用於unskewed輸入：我通常會通過應用轉換到父DIV和施加反變換的內容做到這一點框並顯示爲矩形。聚焦效果，如果輸入框本身是扭曲歪斜只：

http://jsfiddle.net/kdqKX/

form { 
    background:#62CAD9; 
} 

input { 
    margin: 20px; 
    background: white; 
    width:300px; 
    border: none; 
    height: 30px; 
    transform:skewX(30deg); 
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg); 
} 

的這裏的問題是，文字歪斜。

我知道我可以只清除病竈的輪廓，但有什麼辦法之一：

1. 傾斜輸入框 - 但不是包含的文本 - 不通過父DIV傾斜
2. 當子輸入框集中時，將邊框應用到父div

我不知道js或任何腳本，因此無腳本解決方案是首選。不過，我確實認爲這在純CSS中是不可能的，所以讓我知道任何可能的解決方案。

謝謝你，你勇敢的互聯網天才，

道爾頓

Answer 1

最簡單的解決方案將是一個背景圖像。
CSS漸變可以僞造這個。

background-image:linear-gradient(45deg, #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px); 

嘗試沒有改變。 http://jsfiddle.net/khGDj/ 其他簡單的方法，將寬度僞元素和邊界/藍色/透明。根據我的瞭解，輸入並不需要。