Question

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

Answer 1

在CSS中，不可能放置这样的条件，但你可以为它创建两个不同的类，或者你可以使用javascript / jquery来改变图像。

Answer 2

你的问题很难理解，但是如果我正确地读你，你想要的是两个按钮共享相同的基本样式，但是它们有一些不同的样式元素？

在这种情况下，答案是肯定的，这很简单。

最简单的方法是给他们多个班级。因此，您可以为它们提供相同的类，它指定您希望它们共享的样式，还可以为其他类名称设置其他功能的样式。您也可以使用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中区分它们，但这可能是最简单的。

希望有所帮助。

Answer 3

提交按钮是按钮的类型。默认情况下，<input type="button">或<button>是一个按键。

您可以为提交按钮和“普通”按钮（IE7 +）

设置单独的类

input[type=button]
input[type=submit]
button
button[type=submit]

有关详细信息，请参阅this question

您还可以使用不同的id：

<button type="submit" id="submitButton">Submit</button>
<button id="searchButton">Search</button>

和css

#submitButton
{
}

#searchButton
{
}

或class es

<button type="submit" class="submitButton">Submit</button>
<button class="searchButton">Search</button>

和css

.submitButton
{
}

.searchButton
{
}

Answer 4

以下是如何执行此操作的示例。

<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>

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

4 个答案: