無法在HTML表單提交按鈕上獲得圓角？

我有一個在HTML文檔的形式提交按鈕，像這樣：無法在HTML表單提交按鈕上獲得圓角？

<form id = "submit" method="get" action=""> 
    <input type="submit" name="action" value="Download" id="dlbutton"/> 
</form>

我嘗試使用邊界半徑屬性獲得圓角它與CSS，但他們仍然保持清晰：

#dlbutton{ 
    background:#223445; 
    color:#FFFFFF ; 
    border: 1px solid #223445; 
    border-radius: 18px 
    -moz-border-radius: 5px 
    display:inline-block; 
    width: 20em; 
    height: 5em; 
    -webkit-font-smoothing: antialiased; 
}

我還有一個網頁，是風格完全相同，有圓角，除了在HTML上另一個按鈕按鈕是這樣的：

<p><button class="clickable" id="clickable">Click me</button></p>

我使用最新的Firefox。謝謝

來源

2014-02-09 Lucifer N.

你忘了分號（;）。變化：

border-radius: 18px 
-moz-border-radius: 5px

到：

border-radius: 18px; 
-moz-border-radius: 5px;

另外，我建議增加：

-webkit-border-radius: 5px;

更好的跨瀏覽器的兼容性。

來源

2014-02-09 00:57:02

'+ 1'爲你丹尼爾，歡呼聲。 –

我是個白癡。謝謝。 –

@guts不這麼說。我們都必須從某個地方開始！ :) –

我希望這些鏈接會幫助你，請他們：按鈕

例子：

CSS代碼：

// FIRST STYLE THE BUTTON 
input#bigbutton { 
width:500px; 
background: #3e9cbf; // the colour of the button 
padding: 8px 14px 10px; // apply some padding inside the button 
border:1px solid #3e9cbf; // required or the default border for the browser will appear 
cursor:pointer; // forces the cursor to change to a hand when the button is hovered 
// Style the text 
font-size:1.5em; 
font-family:Oswald, sans-serif; 
letter-spacing:.1em; 
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); // give the text a shadow 
color: #fff; 
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/ 
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999; 
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999; 
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999; 
/*give the corners a small curve*/ 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 
// SET THE BUTTON'S HOVER AND FOCUS STATES 
input#bigbutton:hover, input#bigbutton:focus { 
color:#dfe7ea; 
/*reduce the size of the shadow to give a pushed effect*/ 
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999; 
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999; 
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999; 
}

HTML代碼：

<input id="bigbutton" type="submit" value="Big Button That Needs Clicking" />

來源

2014-02-09 00:59:22

這個答案可以減少90％，說實話。儘量保持它更短，更多的組成。 –

我知道，我只是想出了一個例子。 –

我只是想指出的是，所有這三個做同樣的事情，但在不同的瀏覽器，因此您可以將它們設置爲相同的參數：

-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px;

所以你可以讓他們到你的代碼如下：

#dlbutton { 
    background:#223445; 
    color:#FFFFFF ; 
    border: 1px solid #223445; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
      border-radius: 5px; 
    display:inline-block; 
    width: 20em; 
    height: 5em; 
    -webkit-font-smoothing: antialiased; 
}

來源

2017-10-30 06:19:42

無法在HTML表單提交按鈕上獲得圓角？

回答

相關問題