Question

我现在有这个代码（继早期问题之后）：

input[type=submit]:focus {
  background-color: yellow;
  outline: none;
}

但问题是，当我点击屏幕上的任何其他位置时，背景颜色会恢复正常。如果我点击另一个按钮，我怎样才能让它保持不变？还有一个问题，当页面加载时，如何让一个特定的一个默认为一种颜色？此刻所有颜色都是黑色背景，直到你点击一个，然后将其变为黄色，然后点击页面上的任何其他位置，将其变回黑色

纯粹的JS解决方案

Answer 1

如果您想要更改背景，直到它被另一个按钮再次更改，请使用JS更改input背景，而不是仅仅更改焦点。添加事件侦听器或从HTML中执行此操作：

<input type="submit" onclick="this.style.background='yellow';" />

然后为您想要更改颜色的其他元素执行类似的操作。这样，颜色变化将保持不变，直到另一个按钮改变它。

Answer 2

在您的情况下，您有一个css代码，可在按钮聚焦时更改按钮的背景。要创建按钮的默认背景，您应该删除:focus选择器。

input[type=submit] {
  background-color: blue; 
  /* All buttons will be blue after page loaded */
  outline: none;
}

input[type=submit]:focus {
  background-color: yellow;
}

在您的情况下，您需要使用JavaScript更改background-color属性。

这是工作示例。我们为该按钮设置了一个active类，该按钮最近被点击并从其他按钮中删除了active类。你可以用另一种方式做到这一点，但逻辑是这样的。

var buttons = document.querySelectorAll('input[type="button"]');

var resetBackgrounds = function() {
  for (var i = 0; i <  buttons.length; ++i)
    buttons[i].className = '';
}

for (var i = 0; i <  buttons.length; ++i) {
  buttons[i].onclick = function() {
    resetBackgrounds();
    this.className = 'active';
  }
}

input[type="button"] {
  background-color: blue;
  outline: none;
  color: white;
}

input[type="button"].active {
  background-color: black; 
}

<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="button" value="Button3" />
<input type="button" value="Button4" />

Answer 3

以下是直接jquery的解决方案：

$('input')
  .on('click',function(){
  $('input').css('background','')//reset color
  $(this).css('background','yellow')//set color
})

input[type=submit]{
  background-color: inherit;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />

js vanilla中的等价物：

var inputs = Array.from(document.querySelectorAll('input'))

inputs.forEach(x => x.addEventListener('click', handler))

function handler(e) {
  inputs.forEach(x => x.style.background = 'inherit')
  e.target.style.background = 'yellow'
}

input[type=submit] {
  background-color: inherit;
  outline: none;
}

<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />

保持样式固定为输入直到更改

3 个答案: