当鼠标悬停在按钮上或用户按下按钮时,如何禁用按钮颜色更改?
我正在使用 Bootstrap :
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css'>
下面是使用按钮的部分代码:
<form id="idForm1" method="post" action="/web_crawler">
<h4> Web crawler requests: </h4><br>
<textarea id="id_text_requests" name="text" rows="5" cols="20" style="resize:none">{{text_requests}}</textarea><br>
<input id="form1_send_button" type="button" class="btn" value="Run web crawler">
<br>
</form>
更新:
根据答案和建议,这里是(不完美的)css 解决方案,但我对颜色进行了硬编码(也许它可以通过某种自动化方式完成?)并且在按钮处于单击状态后出现一些虚线框,如何删除它?
这里的例子:
.btn:hover {
background:#325d88;
}
.btn:active:focus {
color: #FFFFFF;
}
.btn:focus {
background: #325d88;
color: #FFFFFF;
}
更新 2:
看起来是 firefox related problem :
这可以解决它:
.btn:focus {
background: #325d88;
color: #FFFFFF;
outline:none;
}
最佳答案
在每个状态下创建一个禁用按钮的样式::disabled
, :hover
, :active
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active,
.btn:disabled:hover:active {
// Your disabled styles
}
关于javascript - 当鼠标悬停在按钮上时禁用按钮颜色更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48704011/