Question

我想在活动或点击时更改按钮的颜色。我尝试了以下Html5和css3代码，但未能实现我的意图。

HTML code：

  <p class="submit">
      <input type = "reset" />
      <input type = "submit" />
  </p>

CSS3代码：

   button.submit:active , button.reset:active {
     border: 2px solid #20911e;
     box-shadow: 0 0 10px 5px #356b0b inset; 
     background-color:blue; /* this is the line of interest */
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;    
           }

我正在使用Chrome进行开发，有人可以帮助我吗？

Answer 1

在CSS中，您使用选择器来定义要配置的元素。这些选择器必须与目标元素匹配。

如果您使用选择器

button.submit:active

你正在寻找一个＆＃34;按钮＆＃34;具有类＆＃34;提交＆＃34;的元素并且很活跃。但是你的html代码中没有这样的元素。

我没有时间解释所有可能的CSS3选择器。但是有很好的教程。例如：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

更改CSS代码以匹配输入元素，并将类添加到输入元素。

 <p>
      <input type = "reset" class="reset"/>
      <input type = "submit" class="submit"/>
  </p>    

 input.submit:active , input.reset:active {
     border: 2px solid #20911e;
     box-shadow: 0 0 10px 5px #356b0b inset; 
     background-color:blue; /* this is the line of interest */
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;    
           }

Answer 2

分别为您的按钮class="submit"和class="reset"。不需要JavaScript。还要更改CSS3代码：

input.submit:active, input.reset:active {....}

活动时更改HTML5按钮颜色

2 个答案: