制作它时遇到很多麻烦,以便点击时jQuery mobile collapsible不显示蓝色发光框阴影。给出一些HTML,如:
<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button id="a1">Go</button></div><br><br>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button id="a2">Go</button></div><br><br>
<br>
...我发现其他一些答案似乎表明以下CSS会有所帮助,但没有骰子:
.collapsibles {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
outline: 0 !important;
}
&#13;
还尝试将此CSS应用于h1s,将其应用于内联,以及其他一些事情 - 到目前为止还没有成功。
JSFiddle演示了这个问题:https://jsfiddle.net/pseudobison/xd6oejzz/2/
答案 0 :(得分:1)
要覆盖的JQM类是.ui-btn:focus
。
如果您只想为折叠标题按钮避开蓝色光环,请使用:
.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
您还可以通过覆盖
从可折叠内部的所有可点击小部件中删除蓝色光环.ui-collapsible .ui-btn:focus
<强>样本:强>
.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.ui-collapsible .ui-btn:focus {
/*
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div>
<div class="col-xs-5"><button id="a1">Go</button></div><br><br>
<div class="col-xs-7 txt">A2</div>
<div class="col-xs-5"><button id="a2">Go</button></div><br><br>
<br>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分:0)
请更改将应用这些更改的DOM selector
:
/* This will removed the blue outline once expanded */
.collapsibles h1 a.ui-collapsible-heading-toggle {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
这是一个JS小提琴示例: https://jsfiddle.net/wvta0ezL/4/
希望这有助于您的情况。