在表单提交按钮上渲染圆角的方法

我在寻找的是一种干净的方法，用类“submit”来圆化所有输入的角点。我已经尝试了大量的JavaScript技术，但没有一个适用于表单元素。纯粹的CSS会很棒，但是请注意，按钮需要扩展，并且会有任意的文本。其他方法需要真正丑陋的HTML输入，这是我不想要的。在表单提交按钮上渲染圆角的方法

任何想法？

来源

2009-04-23 Buzz

尝试CurvyCorners（30100字节，精缩）这种解决方案，因为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" />

来源

2009-07-30 10:16:12 marknt15

我一直在使用这种方法了一会儿 -

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

它工作得很好

来源

2009-04-23 16:42:07 danpickett

+1真棒。我用了一段时间。纯粹的CSS，只是起作用。 – 2009-04-23 16:47:02

这看起来像是锚，似乎并不支持垂直缩放。或者我错过了什么？ – Buzz 2009-04-23 17:11:09

你错过了一些东西 - 这种方法可以扩展为支持按钮元素 - http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/ 不要忘了为IE指定一个按钮类型=“提交”。我还没有找到垂直缩放的东西，或有需要它。 – danpickett 2009-04-24 13:01:33

也许这是你正在寻找的一种解决方法。尽管它不支持垂直缩放。（凭啥你已经多提交按钮？）

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

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

来源

2009-07-30 11:13:47 Hurix

如果你能使用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>

做一个漂亮的红色按钮与圆边缘。

来源

2012-04-20 21:05:15 corey

在表单提交按钮上渲染圆角的方法

回答

相关问题