jQuery Mobile 输入和文本区域自定义样式

我正在尝试设计我的 jQuery Mobile 表单输入和文本区域的样式。

现在他们是这样定制的：

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

你好想自己设计没有圆边的款式。我通过添加新的样式表并添加以下内容解决了这个问题：

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. 在文本区域上我无法摆脱内部阴影。
2. 当我单击字段时，在文本区域和输入上都会出现外部阴影。我无法在 jQuery Mobile css 或 .js 中找到它的来源。有任何想法吗？

内部阴影似乎是-webkit-box-shadow（至少对于 WebKit 而言）来自.ui-shadow-inset。外部的“阴影”几乎可以肯定是outline财产 http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines; the outline一般来自浏览器的默认样式表。将这两个设置为none:

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

对我来说消除了这两种影响。您需要移植-webkit-box-shadow到您关心的其他浏览器，但您可以查看.ui-shadow-inset看看你需要否定什么。