将锚标记设置为看起来像提交按钮

Question

我有一个表单,其中有一个"提交"按钮和一个"取消"锚点.HTML是这样的:

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

我希望两个人看起来和行为一样.没什么好看的,只是类似于"Ask Question"锚点在StackOverflow上看起来的样子.

我可以让两个看起来有点相似,包括边界框,背景颜色和悬停背景颜色,但我不能完全获得高度和垂直对齐以便彼此玩得很好.我发布了我的CSS但是现在这样一团糟,我认为从头开始可能更容易,让准系统的CSS布局工作,然后继续前进.

PS我知道我可以使用an而不是锚点并挂钩onClick事件来进行重定向.现在,使用锚来解决这个问题几乎是一个原则问题(此外还要考虑网络蜘蛛的考虑因素).

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会忽略它.但是,如果您将其他样式作为备份包含在内,那么支持的浏览器会appearance删除该属性,而更喜欢显式背景和边框!

你可能会做的是appearance默认使用上面的样式,并根据需要进行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>

Answer 2

我希望这将有所帮助.

<a href="url"><button>SomeText</button></a>

Answer 3

我建议您同时使用“输入提交/按钮”而不是锚点，并将这行代码onClick="javascript:location.href = 'http://stackoverflow.com';" 放在要用作链接的“输入提交/按钮”中。

提交范例

<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" />

按钮示例

<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button>

Answer 4

链接和输入是非常不同的东西，用于非常不同的目的。在我看来，您需要一个取消按钮：

<button>Cancel</button>

或者也许是一个输入：

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