button:active{} does not change the background color when the button is clicked-CodePudding

I have an ESP32 that is serving a web page. One page. No separate CSS page and it will not be served from an SD drive. The goal is to have a very thin client. The page will be displayed on my cell phone via WiFi. There will be several of these buttons that direct the ESP32 to control the device connected to it. The desire for the :active behavior is to make it easy for the operator to see they have landed on the desired button. I want ALL the buttons to do this. From what I've read in my web research, I want to use over . I will happily accept directions to the contrary if that conclusion is wrong.

Since there will be several buttons, I was hoping to use a style section to define the button in general and then inline styles on the button for how each one varies. The goal is to have this as minimalist as possible.

Ultimately, the solutions will be the basis for a design supporting close to 20 buttons. I hope this is enough needed context.

  <!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>

The :active has no effect when the button is pushed. Everything else works as desired.

What am I missing?

Here is my final solution for the page. I am still open to optimizations.

<!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>

CodePudding user response：

As mentioned in the comments, your inline CSS has higher priority over the embedded one.

Best solution would be to move your entire inline CSS to embedded (or external).

However, if that's not something you can do here for some reason, you could use !important property to take priority in your embedded CSS:

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

Full code:

  <!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>

CodePudding user response：

You could also use an onclick event. So when the button is clicked, the background changes to black. You could also do that, but the background will stay black instead of turning back to blue when you release.

You can do so by creating a new function onclick="myFunction()" like so.

Next, in the script section, call the function function myFunction() { } like so.

In the brackets, write this code document.getElementById("baseButton").style.background = "black"; so when you click the button, the background changes to black.