在同一个css中自定义不同的提交按钮答案

【问题标题】：custom different submit button in same css在同一个css中自定义不同的提交按钮
【发布时间】：2011-09-30 10:18:27
【问题描述】：

我可以在同一个 css 中自定义不同的提交按钮吗？例如，我想要搜索按钮中的搜索图像，但要为注册页面提供正常提交。有可能吗？

【问题讨论】：

看看this thread

标签： html css

【解决方案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:hover{color: 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:hover{color: 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:hover{color: 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>&nbsp;
<button class="ButtonB" type="submit" name="Button" id="hiddenField" value="020000"> Reports</button>&nbsp;
<button class="ButtonC" type="submit" name="Button" id="hiddenField" value="030000"> Data   </button>&nbsp;
<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