在表單提交按鈕上渲染圓角的方法

我在尋找的是一種乾淨的方法，用類「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

在表單提交按鈕上渲染圓角的方法

回答

相關問題