Question

有没有办法为HTML / bootstrap按钮提供单击/未单击状态？我希望能够拥有一个具有复选框功能的按钮的美感。

Answer 1

是的，有办法。您可以使用labels和:after自定义复选框，使用纯CSS执行此操作：

<强> HTML

<div class="button">
  <input type="checkbox" id="custom" />
  <label for="custom">Click Me</label>
</div>

<强> CSS

input[type=checkbox] {
    visibility: hidden;
}

.button {
    position: relative;
}

.button label {
    background: black;
    color: #FFF;
    cursor: pointer;
    position: absolute;
    left: 4px;
    top: 4px;
    text-align: center;
    padding: 10px 20px;
    width: 60px;
    height: 20px;
}

.button label:after {
    opacity: 0;
    content: '';
    position: absolute;
    background: #00bf00;
    background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: linear-gradient(top, #00bf00 0%, #009400 100%);
    top: 0px;
    left: 0px;
    padding: 10px 20px;
    width: 60px;
    height: 20px;

}

.button label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.5;
}

.button input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    content: 'ACTIVE';
}

FIDDLE

Answer 2

听起来你已经在使用Bootstrap了。如果是，请使用他们的button.js：

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

请注意，这会使用aria-pressed（在MDN上阅读更多内容）以获取辅助功能。

或使用checkboxes：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Answer 3

只需创建两个具有不同样式的CSS类。

然后在JavaScript / jQuery onClick事件上更改CSS-Class。

编辑：您可以使用JQuery方法.toggleClass - ＆gt; jsfiddle.net/g1akxxg6/1/

HTML按钮单击状态

3 个答案: