jQuery Mobile Input＆Textarea自定義樣式

Question

我正在嘗試設計我的jQuery Mobile Form輸入& textareas。

現在他們來定製這樣的：

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-text.html

HI希望他們的風格與自己無圓邊。

input { 
width:100%; 
height: 40px; 
border: 0px !important; 
border-bottom: 1px solid !important; 
border-bottom-color: #ccc !important; 
-moz-border-radius: 0px !important; 
-khtml-border-radius: 0px !important; 
-webkit-border-radius: 0px !important; 
border-radius: 0px !important;} 

#overheard textarea { 
width:100%; 
height: 100px !important; 
border: 0px !important; 
-moz-border-radius: 0px !important; 
-khtml-border-radius: 0px !important; 
-webkit-border-radius: 0px !important; 
border-radius: 0px !important;} 

然而，有幾件事情我想不通：

1. 在textarea的我無法擺脫我已經加入了新的樣式表，並加入解決了這個內在的影子。
2. 在textarea和input上，當我點擊一個字段時，會出現一個外部陰影。我無法找到jQuery Mobile css或.js中來自哪裏。有任何想法嗎？

Answer 1

內部影子似乎是來自.ui-shadow-inset的-webkit-box-shadow（對於WebKit至少）。外面的「影子」幾乎肯定是outline property; outline通常來自瀏覽器的默認樣式表。設置這兩個到none：

-webkit-box-shadow: none; 
outline: none; 

讓我擺脫兩種效果。您需要將-webkit-box-shadow移植到您關心的其他瀏覽器，但您可以查看.ui-shadow-inset以瞭解您需要否定的內容。