Моделирование тега привязки для сходства с кнопкой отправки

Question

Моделирование тега привязки для сходства с кнопкой отправки

У меня есть форма, где существует кнопка "Submit" и привязка "к Отмене". HTML - это:

<input type="submit" value="Submit" />
<a href="some_url">Cancel</a>

Я хотел бы за два посмотреть и действовать то же. Ничто не полагает, просто что-то подобное тому, как, "Задают Вопрос" взгляды привязки на StackOverflow.

Я могу заставить два выглядеть несколько подобными, с ограничительной рамкой, цветом фона и цветом фона при наведении курсора, но я не могу вполне заставить высоту и выравнивание по вертикали играть по правилам друг с другом. Я отправил бы свой CSS, но именно такая путаница в этой точке, я думаю, что это могло бы быть легче только запустить с нуля, получить базовую работу расположения CSS, затем идти дальше оттуда.

P.S. Я знаю, что мог использовать вместо привязки и поднять трубку onClick событие, чтобы сделать перенаправление. Это - почти принципиальный вопрос в этой точке теперь для получения этого права с помощью привязки (плюс существуют соображения поискового робота для учета здесь).

40

html css

задан Kevin Pang 2 February 2010 в 19:56

4 ответа

Другие вопросы по тегам:

html css

Похожие вопросы:

score 46 · Answer 1

Лучшее, что вы можете получить с простыми стилями, было бы что-то вроде:

.likeabutton {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.likeabutton:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

(возможно, с каким-то рецептом, чтобы остановить сфокусированные кнопки IE6-IE7.)

Это не обязательно посмотрим Точно как кнопки на родном рабочем столе, хотя; Действительно, для многих темпов настольных компьютеров невозможно воспроизвести внешний вид кнопки в простых CSS.

Однако вы можете попросить браузера использовать нативную рендеринг, который лучше всего:

.likeabutton {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
}

К сожалению, поскольку вы, возможно, догадались из префиксов, специфичных к браузеру, это функция CSS3 , что пока не будет повсюду везде. В частности, IE и Opera будет игнорировать это. Но если вы включаете другие стили в качестве резервной копии, браузеры, которые поддерживают внешний вид , капля, что свойство, предпочитая явные фоны и границы!

То, что вы можете сделать, это использовать внешний вид стилей, как указано выше по умолчанию, и делайте Fixups JavaScript по мере необходимости, например. :

<script type="text/javascript">
    var r= document.documentElement;
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) {
        // add styles for background and border colours
        if (/* IE6 or IE7 */)
            // add mousedown, mouseup handlers to push the button in, if you can be bothered
        else
            // add styles for 'active' button
    }
</script>

score 0 · Answer 2

Ссылки и входы - это очень разные вещи, используемые для очень разных целей. Похоже, вам нужен кнопка для отмены:

<button>Cancel</button>

или, может быть, вход:

<input type="button" value="Cancel"/>

score 0 · Answer 3

Почему бы просто не использовать кнопку и не вызвать URL-адрес с помощью JavaScript?

<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />

score -1 · Answer 4

Стиль Ваше изменение кнопки «Отправить» вместо этого и отправьте использование JavaScript:

<a class="link-button" href="javascript:submit();">Submit</a>
<a class="link-button" href="some_url">Cancel</a>

function submit() {
    var form = document.getElementById("form_id");
    form.submit();
}