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以了解您需要否定的内容。