jQuery Mobile输入和Textarea自定义样式 [英] jQuery Mobile Input & Textarea Custom Style

问题描述

我正在尝试设置jQuery Mobile Form输入的样式&文本区域.

I am trying to style my jQuery Mobile Form inputs & textareas.

现在他们像这样自定义了:

Right now they come custom like this:

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

HI希望自己设计无圆形边缘的样式.我已经通过添加一个新样式表并添加以下内容来解决了这个问题:

HI want to style them myself with no rounded edges. I have solved this by adding a new style sheet and adding:

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

但是，有两件事我无法弄清:

However there are a couple of things I can't figure out:

1. 在textarea上，我无法摆脱内部阴影.
2. 在文本区域和输入上，当我单击一个字段时，都会出现一个外部阴影.我找不到这来自jQuery Mobile CSS或.js中的位置.有什么想法吗?

推荐答案

内部阴影似乎是来自.ui-shadow-inset的-webkit-box-shadow(至少对于WebKit是这样).外部的阴影"几乎可以肯定是 outline属性 ; outline通常来自浏览器的默认样式表.将它们都设置为none:

The inner shadow appears to be a -webkit-box-shadow (for WebKit at least) that comes from .ui-shadow-inset. The outer "shadow" is almost certainly the outline property; the outline generally comes from the browser's default stylesheet. Setting both of those to none:

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

摆脱对我的两种影响.您需要将-webkit-box-shadow移植到您关心的其他浏览器上，但是您可以查看.ui-shadow-inset来了解需要取反的内容.

Gets rid of both effects for me. You'll need to port the -webkit-box-shadow to the other browsers you care about but you can look at .ui-shadow-inset to see what you need to negate.

这篇关于jQuery Mobile输入和Textarea自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！