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

更改jquery-ui按钮的活动状态

1 个答案: