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

【问题标题】：jQuery Mobile Input & Textarea Custom StylejQuery Mobile 输入和文本区域自定义样式
【发布时间】：2011-06-23 05:01:05
【问题描述】：

我正在尝试设置我的 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;}

但是有几件事我想不通：

在 textarea 上，我无法摆脱内部阴影。
当我点击一个字段时，在 textarea 和 input 上都会出现一个外部阴影。我在 jQuery Mobile css 或 .js 中找不到它的来源。有什么想法吗？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

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

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

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

【讨论】：