无法在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表单提交按钮上获得圆角？

回答

相关问题