Question

我有一个盒子，我想要更改样式，比如当用户点击该框时更改边框。

我知道这可以通过JS或jQuery来完成，但这只能使用CSS吗？

我尝试使用：focus和：active，它会在你点击时更改样式，但是在点击发布时它会恢复CSS

这是我的代码：

CSS：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    border:2px solid #ff0000;

}

.box:active, .box:focus {
    border: 2px solid #00afec;
}

我创建小提琴也尝试： http://jsfiddle.net/cj3LV/

请建议！

Answer 1

CSS中有一个带Checkbox的技巧：它可能因为以下事情：

隐藏了复选框。
如果您点击标签，则会选中复选框。原因与for =“toggle-1”和id =“toggle-1”
此声明input[type=checkbox]:checked ~ .box { }匹配给定元素的兄弟元素。如果它是.box

input[type=checkbox]:checked

http://jsfiddle.net/cj3LV/3/

CSS：

.box, .label{
    width:100px;
    height:100px;
    border:2px solid #ff0000;
    text-align:center;
    line-height: 100px;
}
.label {
    position: absolute;
    display:block; 
    border:0;
}
#toggle-1 { display:none; }


/* Toggled State */
input[type=checkbox]:checked ~ .box {
   border: 2px solid #00afec;
}

HTML：

<label for="toggle-1" class="label"></label>
<input type="checkbox" id="toggle-1">
<div class="box">Click ME!!</div>

有关详细信息，请参阅此处：http://css-tricks.com/the-checkbox-hack/

Answer 2

在这里：FIDDLE

<强> HTML

<div id='clickme'><a href="#clickme">Click Me</a></div>

<强> CSS

#clickme{
    width:100px;
    height:100px;
    border:2px solid #ff0000;
    text-align:center;
    line-height: 100px;
}

#clickme:target
{
    background-color: red;
}

编辑：我最初删除了它，因为有更好的答案。但我错了，它可以服务。

Answer 3

您可以使用目标，但需要创建链接

http://css-tricks.com/on-target/

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

仅使用CSS更改所选元素的CSS样式

3 个答案: