在表单提交按钮上呈现圆角的方法答案

【问题标题】：Method to render rounded corners on form submit buttons在表单提交按钮上呈现圆角的方法
【发布时间】：2012-07-15 22:44:59
【问题描述】：

我正在寻找的是一种干净的方法，可以用“提交”类来圆所有输入的角。我已经尝试了许多 javascript 技术，但没有一个对表单元素效果很好。纯 CSS 会很棒，但是请注意，按钮需要展开，并且会有任意文本。其他方法需要在输入周围使用非常难看的 HTML，这是我不想要的。

有什么想法吗？

【问题讨论】：

标签： javascript html css user-interface rounded-corners

【解决方案1】：

尝试CurvyCorners（30,100 字节，缩小）此解决方案，因为 IE 浏览器不会使其四舍五入。不过我还没有尝试添加图片。

<style type="text/css">
.input-rounded-button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    padding:0 3px 0 3px;
    display:inline-block;
    text-decoration:none;
    background:#595651;

    color:#FFFFFF;
    cursor:pointer;
    font:11px sans-serif;
}

.input-rounded-button:hover { 
    text-decoration:none; 
    color:#ADD8E6; 
    cursor:pointer;
    border:1px solid #FF2B06;
}
</style>

<input class="input-rounded-button" type="button" value="SEARCH" />

【讨论】：

较新的 IE 应该支持上述方法，如果不支持，请考虑不要只在 IE 中进行四舍五入。我的意思是，真的，已经符合标准了！

【解决方案2】：

这个方法我用了一段时间-

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

效果很好

【讨论】：

+1 太棒了。我已经用了一段时间了。纯 CSS，可以正常工作。
好像是给锚点用的，好像不支持垂直缩放。还是我错过了什么？
你遗漏了一些东西 - 这个方法可以扩展来支持按钮元素 - filamentgroup.com/lab/… 不要忘记为 IE 指定一个按钮 type="submit"。我还没有找到具有垂直缩放功能的东西，或者需要它。
这不支持表单输入，也不支持垂直缩放。为什么这个答案被赞成？我非常了解如何处理按钮，以及如何在不允许垂直缩放的情况下做到这一点。那不是我问的。

【解决方案3】：

也许这就是您正在寻找的解决方法。虽然它不支持垂直缩放。（为什么会有多行提交按钮？）

http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

它专门用于提交按钮，支持相当合理的浏览器范围。

【讨论】：

大声笑...我没有多行提交按钮，但如果用户放大，我不希望按钮损坏。
这个页面有镜像吗？

【解决方案4】：

如果你能够使用 CSS3，我知道的最简单的方法就是这样做：

.button
{
  background-color:#f57070;
  border-radius: 10px;    //-rounding the edges, only available in CSS3-//
  font-family:arial;
  font-size:30px;
  text-decoration:none;
}

使用html代码：

<a href=# class='button'>...</a>

制作一个漂亮的带有圆边的红色按钮。

【讨论】：