按下< button>选择器 [英] Pressed <button> selector

问题描述

我想创建一个button，当按下它时会更改其样式.这是我的CSS代码:

I'd like to create a button that changes its style when it gets pressed. This is my CSS code:

button {
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

button:active {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

<button>Button</button>

仅当我单击&时，它才会更改.等一下我想让它在按下后改变样式.例如，正常状态将为白色，被单击时的状态将为绿色，而释放单击后的状态将为红色.

It is changed only when I click & hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.

推荐答案

如果使用<a>标记而不是按钮，则可以执行此操作.我知道这并不是您所要的，但是如果您找不到解决方案，它可能会为您提供其他选择:

You can do this if you use an <a> tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this:

从另一个答案的演示中借来的结果是:

Borrowing from a demo from another answer here I produced this:

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

<a id="btn" href="#btn">Demo</a>

注意使用:target;这是通过散列指定元素时所应用的样式.这也意味着您的HTML将需要是这样的:<a id="btn" href="#btn">Demo</a>一个以自身为目标的链接.和演示 http://jsfiddle.net/rlemon/Awdq5/4/

Notice the use of :target; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <a id="btn" href="#btn">Demo</a> a link targeting itself. and the demo http://jsfiddle.net/rlemon/Awdq5/4/

感谢@BenjaminGruenbaum，这里是一个更好的演示: http://jsfiddle.net/agzVt/

Thanks to @BenjaminGruenbaum here is a better demo: http://jsfiddle.net/agzVt/

_{此外，作为脚注:确实应该使用JavaScript并从元素中应用/删除CSS类来完成此操作.麻烦得多了.}

这篇关于按下< button>选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！