[英]change active state for jquery-ui button
I am using jquery-ui 1.11. 我正在使用jquery-ui 1.11。 I have a button that I would like the active state to show that the button depresses when clicked. 我有一个按钮,我希望它的活动状态显示单击该按钮时会使其按下。 Using the default functionality that I copied from the jquery-ui website, the text changes color from blue to coral. 使用我从jquery-ui网站复制的默认功能,文本将颜色从蓝色更改为珊瑚。 I added a shadow to the button and I would like the active state to remove the box-shadow so that it looks like the button depresses when clicked. 我在按钮上添加了阴影,我希望在活动状态下删除框阴影,以使其看起来像单击按钮时按下。 This is my HTML: 这是我的HTML:
<div id="rotation_btn_div">
<input id="rotation_schedule_btn" type="button" value="Create Schedule" />
</div>
This is my jquery function: 这是我的jQuery函数:
$(function () {
$("#rotation_schedule_btn")
.button()
.click(function (event) {
event.preventDefault();
});
});
Removing .button()
removes the changes when the button is clicked (ie changes the text from blue to coral). 删除.button()
会在单击按钮时删除更改(即,将文本从蓝色更改为珊瑚)。 I would like to keep the text the same and just show the button as depressed when clicked. 我想保持文本不变,并且仅在单击时将按钮显示为按下状态。 This is my .css: 这是我的.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;
}
You want to apply CSS on input tag of type button so you can use CSS selector that way: 您想将CSS应用于类型按钮的输入标签,以便可以通过以下方式使用CSS选择器:
Use 采用
input[type="button"]:active {
box-shadow: none;
}
instead of 代替
button:active {
box-shadow: none;
}
EDIT: You can add margins to button to make it more look like depressed button. 编辑:您可以向按钮添加边距,使其看起来更像是按下按钮。 You can adjust margin based on the box-shadow values to get your desired effect. 您可以根据框阴影值调整边距以获得所需的效果。
input[type="button"]:active {
box-shadow: none;
margin-top:3px;
margin-left:3px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.