更改 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;
}

编辑：您可以为按钮添加边距，使其看起来更像是按下的按钮。您可以根据 box-shadow 值调整边距以获得您想要的效果。

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