jQuery Mobile Input和Textarea自定义样式

我正在尝试设计我的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和输入上都会出现一个外部阴影。 我找不到jQuery Mobile css或.js的来源。 有任何想法吗？

Answer 1

内部阴影似乎是来自.ui-shadow-inset的-webkit-box-shadow （至少对于WebKit而言）。 外部的“阴影”几乎肯定是outline属性 ; outline通常来自浏览器的默认样式表。 将这两者都设置为none ：

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

摆脱对我的影响。 您需要将-webkit-box-shadow移植到您关心的其他浏览器，但是您可以查看.ui-shadow-inset以查看您需要否定的内容。