Проблема с рамкой input-а, и градиентом в chrome

[Mortician]

Здравствуйте!

Вокруг input-а рамка которую никак не получается убрать, и куда-то ушуршал градиент на кнопке. Вот пример:

http://jsfiddle.net/RR6hG/10/

В Opera все отлично, в IE10 тоже. Firefox еще не понимает флексбоксы. Однако Google Chrome отображает загадочный border вокруг input-а (НЕ во время фокуса, а вообще) и неотображает градиент.

Подскажите, пожалуйста, что делать?

[danik.html]

Загадочная рамка из-за встроенных стилей -webkit-appearance: searchfield. Достаточно сбросить значение на none или textfield. Думаю это баг.

Что касается градиента, то смотрите http://caniuse.com/#search=linear-gradient. Так работает:

background-image: -webkit-linear-gradient(bottom left, #DBDBDB, white);

[Mortician]

Загадочная рамка из-за встроенных стилей -webkit-appearance: searchfield. Достаточно сбросить значение на none или textfield. Думаю это баг.

Что касается градиента, то смотрите http://caniuse.com/#...linear-gradient. Так работает:

background-image: -webkit-linear-gradient(bottom left, #DBDBDB, white);

Большое спасибо! Блин, я забыл добавить префикс в пример. Но проблем, как я понял, в том что Chrome не понимает (to top right, #dbdbdb, #fff), тоже самое нужно сделать с помощью (45deg, #dbdbdb, #fff).

Очень благодарен!

Edited February 2, 2013 by Mortician