Question

发现表单上输入的默认按钮是第一个submit类型。这有效，但我指定什么按钮看起来像默认按钮，即突出显示的按钮。如果我设置背景颜色，则会更改标准按钮外观中的按钮外观。

以下是HTML表单。

<form id="login_user_id" name="login_user_form"> 

<input type="hidden" name="id" id="id" value="add" /> 
<input type="hidden" name="edit_user" id="edit_user" value="y" />
<table cellspacing="0px"> <tr><td>Username or email:</td></tr><tr><td>
<input type="text" name="username_email" id="username_email" size="30" value="" class="inline_input"/></td> </tr> <tr><td>Password:</td></tr><tr><td>
<input type="password" name="user_passwd" id="user_passwd" size="30" class="inline_input"/></td> </tr> </table></td></tr> </table> 
<button id="login" type="submit" onclick="login_user(); return false;" style="width: 63px;">Login</button> 
<button id="cancel" onclick="cancel_login(); return false;" style="width: 63px; float: right; margin-right:8px; position: relative; top: -22px;">Cancel</button> 

</form>

Answer 1

声明“如果我设置背景颜色，这会改变标准按钮外观中的按钮外观”几乎总结了这些限制。您可以设置按钮样式，但是许多类型的样式会根据系统默认值删除其所具有的功能按钮。浏览器使用一些内置例程来渲染按钮，但许多CSS设置使它们偏离了这一点。通常不可能模仿常见的按钮样式，部分原因是它因系统而异，部分原因是它具有无法在CSS中描述的渲染功能，如当前定义和实现的那样。

所以让按钮看起来像按钮。如果您不能这样做，请以统一的方式设置所有按钮的样式;将非默认按钮看作普通按钮并且默认按钮看起来像是其他按钮会是误导。

如果您只是删除其他按钮，则无需将其中一个按钮指定为默认按钮。（见Reset / Cancel Button Considered Harmful。）

Answer 2

默认情况下，操作系统会绘制按钮，浏览器无法控制它们的外观。如果您开始更改按钮的CSS属性，浏览器将接管并以自己的方式绘制按钮。如果您正在寻找一种简单的方法来获得不同颜色的漂亮按钮，请尝试使用bootstrap。这是一个非常好的CSS样式表，特别是在构建精美外观的表单时。

http://twitter.github.com/bootstrap/

默认按钮颜色

2 个答案: