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

Question

我正在寻找的是一种干净的方法,用"提交"类来绕过所有输入的角落.我已经尝试了许多javascript技术,但没有一个适用于表单元素.纯CSS会很棒,但是,请注意,按钮需要展开,并且会有任意文本.其他方法需要围绕输入的HTML丑陋,我不想要.

有任何想法吗？

Answer 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" />