jquery - 更改 jquery-ui 按钮的事件状态

Question

我正在使用 jquery-ui 1.11。我有一个按钮，我希望它的事件状态显示该按钮在单击时按下。使用我从 jquery-ui 网站复制的默认功能，文本颜色从蓝色变为珊瑚色。我在按钮上添加了一个阴影，我希望事件状态能够移除框阴影，这样它看起来就像按钮在被点击时按下一样。这是我的 HTML:

<div id="rotation_btn_div">
<input id="rotation_schedule_btn" type="button" value="Create Schedule" />
</div> 

这是我的 jquery 函数:

$(function () {
   $("#rotation_schedule_btn")
    .button()
    .click(function (event) {             
     event.preventDefault();
  });
});

删除 .button() 会删除单击按钮时的更改(即将文本从蓝色更改为珊瑚色)。我想保持文本不变，只是在单击时将按钮显示为按下状态。这是我的 .css:

input[type="submit"],
input[type="button"],
button {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: medium;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
    box-shadow: 5px 5px 5px #888888;
}

button:active {
    box-shadow: none;
}

Answer 1

您想在按钮类型的输入标签上应用 CSS，这样您就可以那样使用 CSS 选择器:

使用

input[type="button"]:active {
  box-shadow: none;        
}

代替

button:active {
  box-shadow: none;
}

编辑:您可以为按钮添加边距，使其看起来更像按下按钮。您可以根据框阴影值调整边距以获得所需的效果。

input[type="button"]:active {
  box-shadow: none;  
  margin-top:3px;
  margin-left:3px;      
}