Как убить стили кнопки

[StormMan]

Друзья, доброго времени суток!

В html-документе есть форма <form></form>. В ней есть тег <input type='submit' class='button1' value='Кнопка' />

Если в css не прописывать стили для button1, браузеры отображают кнопку в соответствии со своими вкусами - кто серую, кто градиентно-бликовую, с реакцией на события - например, подсветка при наведении мыши, смена бордюра при нажатии, смещение текста и т.п.

Цель - задать кнопке собственные стили: картинку в бэкграунде, реакцию на наведение мыши и отсутствие реакции на нажатие. Для реализации первых двух стилей в css пишу:

input.button1 {

margin-left: 20px;

width: 100px;

height: 40px;

background:url(img/but1.png) 0 0 no-repeat;

color: #1F2547;

cursor: pointer;

border:none;

font-family: tahoma, arial, sans-serif;

font-weight:bold;

font-size: 14px;

padding-bottom:6px;

}

input.button1:hover {

color: #B137D0;

text-decoration:none;

}

В результате этих манипуляций браузерные стили кнопки заменяются на мои. Но, к сожалению, это не всё. Дело в том, что мне необходимо избавиться и от реакции на нажатие кнопки, и она разная во всех браузерах.

Насколько я понимаю, нужно ещё описать псевдокласс active - реакцию на нажатие. Но вот какие параметры ему задать? Ведь по умолчанию в браузерах свои стили, например, смещение.

Я попробовал поиграть с padding, подобрал такие значения, что в Опере при нажатии кнопки смещение пропало (что мне и требовалось), но в Лисе и Осле другие параметры, поэтому смещение в них просто изменило характер.

Что посоветуете? Как избавится от этого смещения?

Edited February 25, 2009 by StormMan

[Veseloff]

Я бы подошел к этому с совершенно другой стороны - вместо <input> сделал бы <a>, при нажатии на который происходит сабмит формы. Тут совершенно отпадёт необходимость избавляться от реакции на нажатие, ибо реакции нет как таковой (если не указать, конечно)

[Searcher]

может проще использовать type=image

или вообще <a onclick="form.submit()"></a> - тут вообще все что угодно можно натворить

[StormMan]

Veseloff, спасибо А можно подробнее?

Я попробовал прописать <a type='submit' class='button1'>Кнопка</a> сначала внутри формы, потом вне её, в обоих случаях результат - банальное исчезновение кнопки, и появление вместо неё просто надписи "Кнопка" с дефолтными стилями ссылки и с полным отсутствием какой-либо реакции на нажатие. Как сделать правильно? По ходу я запутался...

Searcher, спасибо за ответ А как сделать, чтобы в случае type="image" происходил сабмит при клике?

А насчёт <a onclick="form.submit()"></a>... Я попробовал в таком виде написать вне и внутри формы: <a onclick="form.submit()" class="button1">Кнопка</a>, в результате получилось то же самое, что и в случае с вариантом Veseloff'а - просто надписи "Кнопка" с дефолтными стилями ссылки и без каких-либо реакций на нажатие...

Похоже, я напутал что-то либо с html, либо в стилях неправильно описан класс button1... Где ошибка?

В стилях я изменил совсем немного - убрал input перед объявлением button1 и button1:hover. Может, надо было изменить что-то ещё?

Напишите пожалуйста пример конкретный как сделать

Edited February 25, 2009 by StormMan

[Victor Ananiev]

type="image" - и есть сабмит)

[StormMan]

Victor Ananiev, спасибо за пояснение Вот оно значит что...

Значит, попробовал я имейджем это дело оформить... Сразу вопрос - если я хочу, чтобы на фоне картинки был текст, то как это реализовать?

И, похоже, Осёл это дело совсем не понимает - он изобразил мне на фоне фоновой картинки значок отстутствующего изображения (src я по понятным причинам не написал)...

[StormMan]

Попробовал разные варианты... image к сожалению не подходит. Даже если прописать src="img/but1.png" в теге input, то в опере получается новый косяк - рамка, равно как и в Лисе....

Как-то должно лечиться это смещение при нажатии... Если делать через <a onclick="form.submit()></a> или <a> вместо <input>, то как это должно выглядеть в разметке и стилях? Подскажите пожалуйста

[Veseloff]

Лично я делал, например, так:

a.gbutton
{
background-image:url(../img/profiles/but_subm.jpg);
color:#EEEEF9;
display:block;
font-family:Tahoma;
font-size:11px;
height:23px;
line-height:23px;
text-align:center;
text-decoration:none;
width:115px;
}

Это в стилях, а в коде внутри формы

<a class="gbutton blcorr" href="java script:$('#search_forums').submit();">Сабмит</a>

Использовал jQuery в данном примере. Если вы не используете, то href="java script:$('#search_forums').submit();" замените на аналогичный вариант классического яваскрипта

[Victor Ananiev]

код:

<a onclick="this.parentNode.submit();" id="submit_my_form">AAA</a>

в стилях:

#submit_my_form
{
 background:url('') left top(element position) no-repeat(repeat-x, repeat-y);
display:block;
height:height;
width:width;
}

Количество parentNode зависит от вложенности, возможно легче будет написать document.getElementById('form id'); если ваш сабмит слишком глубоко лежит)

Edited February 25, 2009 by Victor Ananiev