将锚标记设置为类似于提交按钮 [英] Styling an anchor tag to look like a submit button

问题描述

我有一个表单，其中有一个提交按钮和一个取消锚点。 HTML是这样的：

I have a form where there's a "Submit" button and a "Cancel" anchor. The HTML is this:

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

我想让两个人看起来和行动一样。没有什么奇怪，只是类似于问问题锚点如何看StackOverflow。

I'd like for the two to look and act the same. Nothing fancy, just something similar to how the "Ask Question" anchor looks on StackOverflow.

我可以得到两个看起来有点类似，边界框，背景颜色，和悬停背景颜色，但我不能完全得到的高度和垂直对齐方式来玩彼此好。我会发布我的CSS，但这是一个混乱，在这一点，我认为可能更容易从头开始，得到一个准系统的CSS布局工作，然后从那里继续。

I can get the two to look somewhat similar, with the bounding box, background color, and hover background color, but I can't quite get the height and vertical alignment to play nice with one another. I'd post my CSS but it's such a mess at this point that I think it might be easier to just start from scratch, get a barebones CSS layout working, then move on from there.

PS我知道我可以使用一个而不是一个锚点，并挂接onClick事件做重定向。现在几乎是一个原则问题，现在使用锚点（这里有考虑到网络蜘蛛的注意事项）来获得这个权利。

P.S. I know I could use an instead of an anchor and hook up the onClick event to do the redirect. It's almost a matter of principle at this point now to get this right using an anchor (plus there are web spider considerations to take into consideration here).

推荐答案

使用简单样式可以获得的最佳效果如下：

The best you can get with simple styles would be something like:

.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- ）

(Possibly with some kind of fix to stop IE6-IE7 treating focused buttons as being ‘active’.)

这不一定与原生桌面上的按钮看起来完全一样;确实，对于许多桌面主题，不可能在简单的CSS中再现按钮的外观。

This won't necessarily look exactly like the buttons on the native desktop, though; indeed, for many desktop themes it won't be possible to reproduce the look of a button in simple CSS.

但是，您可以要求浏览器使用原生渲染，这是最好的：

However, you can ask the browser to use native rendering, which is best of all:

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

$ b $ p

不幸的是，你可能从浏览器特定的前缀猜到，一个 CSS3功能，它并不是随处可见。特别是IE和Opera会忽略它。但是如果你包括其他样式作为备份，支持外观的浏览器删除该属性，更喜欢显式的背景和边框！

Unfortunately, as you may have guessed from the browser-specific prefixes, this is a CSS3 feature that isn't suppoorted everywhere yet. In particular IE and Opera will ignore it. But if you include the other styles as backup, the browsers that do support appearance drop that property, preferring the explicit backgrounds and borders!

你可以做的是默认使用上面的外观样式，并根据需要进行JavaScript修正，例如：

What you might do is use the appearance styles as above by default, and do JavaScript fixups as necessary, eg.:

<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>

这篇关于将锚标记设置为类似于提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！