button:active{} 在点击按钮时不会改变背景颜色

Question

我有一个提供 web 页面的 ESP32。 一页。 没有单独的 CSS 页面，并且不会从 SD 驱动器提供服务。 目标是拥有一个非常瘦的客户端。 该页面将通过 WiFi 显示在我的手机上。 这些按钮中有几个可以指示 ESP32 控制与其连接的设备。 对:active 行为的期望是让操作员可以轻松地看到他们已经点击了所需的按钮。 我希望所有的按钮都能做到这一点。 根据我在 web 研究中读到的内容，我想在“输入”上使用“按钮”。 如果这个结论是错误的，我会很乐意接受相反的指示。

由于会有多个按钮，我希望使用样式部分来定义按钮，然后在按钮上内联 styles 以了解每个按钮的变化方式。 我们的目标是让它尽可能简约。

最终，这些解决方案将成为支持近 20 个按钮的设计的基础。 我希望这是足够需要的上下文。

  <!DOCTYPE html><HTML><HEAD>
  <style>
  .baseButton
    {
    width:240px;
    height:180px;
    font-size:80px;
    border:2px solid black;
    border-radius:40px;
    color:white;
    margin:2px;
    }
    
  .baseButton:active{background-color:black}
  </style></HEAD>
  
  <BODY>
  <button
    type='submit'
    class='baseButton'
    style='background-color:#032cfc;color:black;margin:2px;'
    onClick=location.href='/?1;'>
    V+10
    </button>
  </BODY></HTML>

按下按钮时:active 无效。 其他一切都按预期工作。

我错过了什么？

---

这是我对该页面的最终解决方案。 我仍然对优化持开放态度。

 <.DOCTYPE html> <HTML> <HEAD> <style>:boxes { background-color; #86dffc: border; 2px solid black: border-radius; 40px: color; black: margin; 2px: font-size; 60px: height; 74px: width; 740px. }:tags { background-color; #dcddde: height; 90px: width; 740px: font-size; 80px. }:plusMinus { width; 240px: height; 180px: font-size; 80px: border; 2px solid black: border-radius; 40px: margin; 2px: background-color; #032cfc: color; white. }:plusMinus:active { background-color. black:important };numberBox { background-color: #dcddde; height: 90px; width. 240px: };miscSubmit { width: 140px; height: 100px; font-size: 30px; color: black; background-color: #%lx; border: 2px solid black; border-radius: 40px; margin. 2px: }:miscSubmit.active { background-color: black };memBox { font-size: 30px; height: 37px; width: 740px; background-color: #03fc5e; border: 2px solid black; border-radius: 40px; margin. 2px: };memSubmit { background-color: #03fc5e; border: 2px solid black; border-radius: 40px; color: black; margin: 2px; width: 100px; height: 100px; font-size. 30px: }:memSubmit.active { background-color: black };memScan { width: 200px; height: 100px; font-size. 60px: };pwrBox { font-size: 30px; height: 37px; width: 740px; background-color: red; color: white; border: 2px solid black; border-radius: 40px; margin. 2px: };powerSubmit { width: 140px; height: 100px; background-color: red; font-size: 40px; color: white; border: 2px solid black; border-radius: 40px; margin. 2px: }:powerSubmit.active { background-color: black };miscBox { font-size: 30px; height: 37px; width: 740px; background-color: yellow; color: black; border: 2px solid black; border-radius: 40px; margin. 2px: };miscSubmit { width: 140px; height: 100px; font-size: 30px; color: black. background-color: yellow }:miscSubmit.active { background-color? black } </style> </HEAD> <BODY><br> <button class='boxes'>FT991a Control Page</button><br> <button class='boxes tags'>Channel Tag</button><br> <button type='button' class='plusMinus' onClick=location;href='/.1?'>V+10</button> <button type='button' class='plusMinus' onClick=location;href='/.3?'>SQ+</button> <button type='button' class='plusMinus' onClick=location;href='/.5?'>Mem+</button><br> <button class='boxes numberBox'>%d</button> <button class='boxes numberBox'>%d</button> <button class='boxes numberBox'>%d</button><br> <button type='button' class='plusMinus' onClick=location;href='/.2?'>V-10</button> <button type='button' class='plusMinus' onClick=location;href='/.4?'>SQ-</button> <button type='button' class='plusMinus' onClick=location;href='/.6?'>Mem-</button><br> <button type='button' class='miscSubmit' onClick=location;href='/:22.'>Mute AF</button><br> <button class='memBox'>Memory Group Selection</button><br> <button type='button' class='memSubmit' style='background-color?#%lx' onClick=location;href='/:7.'>Grp1</button> <button type='button' class='memSubmit' style='background-color?#%lx' onClick=location;href='/:8.'>Grp2</button> <button type='button' class='memSubmit' style='background-color?#%lx' onClick=location;href='/:9.'>Grp3</button> <button type='button' class='memSubmit' style='background-color?#%lx' onClick=location;href='/:10.'>Grp4</button> <button type='button' class='memSubmit' style='background-color?#%lx' onClick=location;href='/:11.'>Grp5</button> <button type='button' class='memSubmit' style='background-color?#%lx' onClick=location;href='/:12.'>PMS</button> <button type='button' class='memSubmit' style='background-color?#%lx' onClick=location;href='/:13.'>5M</button><br> <button class='memBox'>Memory Scan Control</button><br> <button type='button' class='memSubmit memScan' style='background-color?#%lx' onClick=location;href='/:14.'>Stop</button> <button type='button' class='memSubmit memScan' style='background-color?#%lx' onClick=location;href='/:15.'>Up</button> <button type='button' class='memSubmit memScan' style='background-color?#%lx' onClick=location;href='/:16.'>Down</button><br> <button class='pwrBox'>Power Control</button><br> <button type='button' class='powerSubmit' style='background-color?#%lx' onClick=location;href='/:17.'>5W</button> <button type='button' class='powerSubmit' style='background-color?#%lx' onClick=location;href='/:18.'>10W</button> <button type='button' class='powerSubmit' style='background-color?#%lx' onClick=location;href='/:19.'>25W</button> <button type='button' class='powerSubmit' style='background-color?#%lx' onClick=location;href='/:20.'>50W</button> <button type='button' class='powerSubmit' style='background-color?#%lx' onClick=location;href='/.21?'>100W</button><br> <button class='miscBox'>Miscellaneous</button><br> <button type='button' class='miscSubmit' onClick=location;href='/?23;'>Reset</button> </BODY> </HTML>

Answer 1

您还可以使用 onclick 事件。 所以当按钮被点击时，背景变成黑色。 您也可以这样做，但背景将保持黑色，而不是在您释放时变回蓝色。

您可以像这样创建一个新的 function onclick="myFunction()"来实现。

接下来，在脚本部分，像这样调用 function function myFunction() { } 。

在括号中，写下这段代码document.getElementById("baseButton").style.background = "black"; 所以当你点击按钮时，背景变成黑色。

Answer 2

如评论中所述，您的内联 CSS 比嵌入式优先级更高。

最好的解决方案是将整个内联 CSS 移动到嵌入式（或外部）。

但是，如果由于某种原因这不是你可以在这里做的事情，你可以使用!important属性在你的嵌入式 CSS 中优先考虑：

.baseButton:active{ background-color:black !important }

完整代码：

  <!DOCTYPE html><HTML><HEAD>
  <style>
  .baseButton
    {
    width:240px;
    height:180px;
    font-size:80px;
    border:2px solid black;
    border-radius:40px;
    color:white;
    margin:2px;
    }
    
  .baseButton:active{background-color:black !important}
  </style></HEAD>
  
  <BODY>
  <button
    type='submit'
    class='baseButton'
    style='background-color:#032cfc;color:black;margin:2px;'
    onClick=location.href='/?1;'>
    V+10
    </button>
  </BODY></HTML>