Question

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 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. On the textarea I can’t get rid of the inner shadow.
2. On both textarea and input when I click on on a field there is an outside shadow that comes up. I can’t find where in the jQuery Mobile css or .js this is coming from. Any ideas?

Answer 1

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;

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.