Кнопочка, не прыгай пожалуйста?

Question

[al3ch5]

Есть следующий код :

<form action="#search" class="form">
     <input type="text" name="query" placeholder="Search">
     <input type="submit" value="GO" name="go">
</form>

CSS

/* Search Field*/
		input[type="text"]{
			border:#e7e7e7 solid 1px;
			
			font-family: Tahoma;
			color:#c3c3c3;
			height:32px;
			width: 200px;
			padding-right: 42px;
			text-indent: 10px;
		}
		input[type="submit"]{
			border:none;
			outline:none;
			font:14px/32px Oswald;
			width:42px;
			background:#29c5e6;
			color:white;

			position:absolute;
			top:0;
			bottom:0;
			right:0;
		}

После нажатия на кнопку, если в поле записаны данные, в Google начинается непонятно. Может масштаб страницы поменяться, или форма будет прыгать(выпадать из своего места)


Аналогичная страница в Firefox, Opera работает нормально! В Google - нет!

Подскажите что не так, не хотелось бы такой прыгание!

Answer 1

[enlare]

может у тебя кнопка наследует от чего-то outline-offset ?
попробуй outline:none !important
для всех состояний инпутов
input:active, input:focus, input:hover, input
да, и сделай курсор свой кнопке, а то не комильфо

Comments

[al3ch5]

За комильфо спасибо!!! Будет сделано, а по поводу outline - сейчас посмотрим...

[al3ch5]

Попробовал, так и есть, где-то наследование! Прописал !important и все нормально.

[enlare]

al3ch5: вот и хорошо)

Answer 2

[Stalker_RED]

В примере не хватает стилей для form.
У меня вот не прыгает jsfiddle.net/vghno57g/1

Comments

[al3ch5]

Аналогичная страница в Firefox, Opera работает нормально! В Google - нет!

попробуй вставить в любую готовую страницу этот код и посмотри!

[Stalker_RED]

al3ch5: Вставил в шаблон adminlte, на основе бутстрапа. Не прыгает: i.imgur.com/xOmw2ke.png

Какие стили у вас на .form?

[al3ch5]

.search-form {
			position:absolute;
			top:0;
			right:0;
		}