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

Question

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

现在它们是这样定制的:

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 中找到它的来源。有什么想法吗？

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 来了解您需要什么否定。