在同一个css中自定义不同的提交按钮
Posted
技术标签:
【中文标题】在同一个css中自定义不同的提交按钮【英文标题】：custom different submit button in same css 【发布时间】：2011-09-30 10:18:27 【问题描述】：我可以在同一个 css 中自定义不同的提交按钮吗？例如，我想要搜索按钮中的搜索图像，但要为注册页面提供正常提交。有可能吗？
【问题讨论】：
看看this thread 【参考方案1】：这是一个如何做到这一点的示例。
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>Title Here </title>
</head><body>
<style type="text/css">input[type=submit] padding:5px 15px; background:#cccfe0; color: #fff; border:0 none; cursor:pointer; -webkit-border-radius: 5px; border-radius: 5px; .ButtonA background-color:333E7B;border-radius:5px;border:5px solid #B7D96B;box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;color:#8576AD;font-family:'Helvetica Neue',Arial,sans-serif;;font-size:16px;font-weight:700;height:32px;text-shadow:#E04644 0 1px 0background: FFD700;padding:4px 16px;text-decoration: none;.ButtonA:hovercolor: FDE47F;background: 7CCCE5;.ButtonB background-color:2E8B57;border-radius:5px;border:5px solid #6B8E23;box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;color:#BDB76B;font-family:'Helvetica Neue',Arial,sans-serif;;font-size:16px;font-weight:700;height:32px;text-shadow:#3CB371 0 1px 0background: FFD700;padding:4px 16px;text-decoration: none;.ButtonB:hovercolor: 32CD32;background: FFFF00;.ButtonC background-color:5F9EA0;border-radius:5px;border:5px solid #008B8B;box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;color:#7FFFD4;font-family:'Helvetica Neue',Arial,sans-serif;;font-size:16px;font-weight:700;height:32px;text-shadow:#5F9EA0 0 1px 0background: FFD700;padding:4px 16px;text-decoration: none;.ButtonC:hovercolor: 66CDAA;background: 008080;.submit input color: #000; background: #ffa20f; border: 2px outset #d7b9c9 </style>
New Test Here
<button class="ButtonA" type="submit" name="Button" id="hiddenField" value="010000"> Admon </button>
<button class="ButtonB" type="submit" name="Button" id="hiddenField" value="020000"> Reports</button>
<button class="ButtonC" type="submit" name="Button" id="hiddenField" value="030000"> Data </button>
<table border="1"><form action="001_CrudScreen.py" method="post"></form>
</table></body></html>
【讨论】：
【参考方案2】：提交按钮是按钮的一种类型。默认情况下，<input type="button"> 或 <button> 是一个按钮。
您可以为提交按钮和“普通”按钮 (IE7+) 设置一个单独的类
input[type=button]
input[type=submit]
button
button[type=submit]
详情请见this question
你也可以有不同的ids：
<button type="submit" id="submitButton">Submit</button>
<button id="searchButton">Search</button>
还有css
#submitButton
#searchButton
或classes
<button type="submit" class="submitButton">Submit</button>
<button class="searchButton">Search</button>
还有css
.submitButton
.searchButton
【讨论】：
【参考方案3】：你的问题很难理解，但如果我没看错的话，你想要的是有两个按钮，它们共享相同的基本样式，但有一些不同的样式元素？
那么，答案是肯定的，很简单。
最简单的方法是给他们多个类。所以你会给它们一个相同的类，它指定你希望它们共享的样式，而且还有一个辅助类名称来设置附加特性的样式。您也可以使用 ID 或名称代替第二类。
<input type='button' id='signup-button' class='mybutton' value='Sign Up' />
<input type='button' id='search-button' class='mybutton' value='Search' />
.mybutton
/*shared styles go here*/
#signup-button
/*specific signup button styles here/*
#search-button
/*specific search button styles here/*
还有许多其他方法可以在 CSS 中区分它们，但这可能是最简单的。
希望对您有所帮助。
【讨论】：
【参考方案4】：在 CSS 中不可能设置这样的条件，但您可以为此创建两个不同的 claase，或者您可以使用 javascript/jquery 来更改图像。
【讨论】：
IMO 使用不同的类/ID 和基于它们的样式，而不是使用 Javascript/jQuery以上是关于在同一个css中自定义不同的提交按钮的主要内容，如果未能解决你的问题，请参考以下文章