我使用以下代码制作复选框按钮:JSBin :
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default active">INPUT</button>
</div>
</body>
</html>
我不喜欢按钮背景的3D效果:
我更喜欢与背景相同的灰色。有谁知道如何实现这一点？
PS:我想坚持使用 <button>而不是 <input>和 <a> .
最佳答案
我在使用 Bootstrap 时遇到的问题是您经常需要覆盖它们的默认样式，并且您必须非常具体地确定如何定位元素，否则 Bootstrap 将覆盖您的 css。 (或者您可以在所有内容旁边加上 !important -> not advised)
不管怎样，吐槽一下，你看到的3d效果是一个box shadow。只需将框阴影设置为无即可。
button.btn.btn-default {
background: #e0e0e0;
box-shadow: none;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default active">INPUT</button>
</div>
</body>
</html>关于css - 去除按钮背景的3D效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41316947/