Question

我正在尝试设计我的jQuery Mobile Form输入＆amp;文字区域。

现在他们来这样定制：

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;}

然而，有一些我无法弄清楚的事情：

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

Answer 1

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

none

为我摆脱两种效果。您需要将-webkit-box-shadow: none; outline: none;移植到您关注的其他浏览器，但是您可以查看-webkit-box-shadow以查看您需要否定的内容。

jQuery Mobile Input＆amp; Textarea自定义风格

1 个答案: