Question

我有一张桌子。每个表行都有一个按钮组，其中包含Yes / No / NA。它还有一些文本框等......

当用户单击是时，该按钮变为红色。当他们点击否时按钮是绿色等等....这个工作。问题是当我点击按钮时，例如点击进入文本框。按钮失去颜色。有什么想法吗？

这是HTML的一部分...（该行还有一些文本框等）

＆＃13;

div.btn-group>button[data-rating='Yes']:default,
div.btn-group>button[data-rating='Yes']:hover,
div.btn-group>button[data-rating='Yes']:focus,
div.btn-group>button[data-rating='Yes']:active,
div.btn-group>button[data-rating='Yes'].active {
  background-color: #00FF00;
  /*background-image: linear-gradient(to bottom, #fff 0, #00FF00 100%);*/
}

＆＃13;

<div class="btn-group" role="group" aria-label="..." id="Rating">
  <button type="button" class="btn btn-default" data-rating="Yes">Yes</button>
  <button type="button" class="btn btn-default" data-rating="No">No</button>
  <button type="button" class="btn btn-default" data-rating="NA">N/A</button>
</div>

＆＃13;

Answer 1

按钮失去焦点后，它将恢复到之前的状态。

使用JavaScript将类应用于它以使其保持活动状态：

let btnOn = document.querySelector('.btn-on');

btnOn.addEventListener('click',()=>{
    btnOn.classList.add('active');
})

.active {
    background-color: #00FF00;
}

<div class="btn-group" role="group" aria-label="..." id="Rating">
    <button type="button" class="btn btn-default btn-on" data-rating="Yes">Yes</button>
    <button type="button" class="btn btn-default" data-rating="No">No</button>
    <button type="button" class="btn btn-default" data-rating="NA">N/A</button>
</div>

<强>小提琴 https://jsfiddle.net/d2wfqwf8/

Answer 2

当你离开按钮时它不活跃/聚焦或悬停。

您需要在单击时添加一个类，并且该类应该生成颜色。

CSS效果仅在有焦点

2 个答案: