Мобильный ввод jQuery и пользовательский стиль Textarea

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

Внутренняя тень выглядит как -webkit-box-shadow (по крайней мере, для WebKit), которая исходит от .ui-shadow-inset. Внешняя «тень» почти наверняка является свойством outline ; outline обычно берется из таблицы стилей браузера по умолчанию. Установка обоих из них на none:

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

Избавляется от обоих эффектов для меня. Вам нужно будет портировать -webkit-box-shadow на другие браузеры, которые вам нужны, но вы можете посмотреть на .ui-shadow-inset, чтобы увидеть, что вам нужно отрицать.