使用CSS单击时将背景色设置为按钮

如何使用css单击背景色时将背景色设置为我的<button>？使用CSS单击时将背景色设置为按钮

.myBtn { 
    background-color: #fff; 
    cursor: pointer; 
    color: #000; 
    text-decoration: none; 
    text-transform: uppercase; 
}

HTML：

<button type="button" class="myBtn">Highlight me when Clicked</button>

来源

2015-05-01 Becky

像切换或仅在按下了按钮的鼠标按钮？ – trumank

抱歉 - 但我没有代表对此发表评论。但我认为这可能回答你的问题：Change background on button click, using CSS only?

编辑：哎呀。这看起来像它改变了整个背景 - 但你很可能仍然可以使用该按钮类像这样使用它，但改变

input[type="checkbox"]:checked + div{ 
    background: #5BC0DE; 
}

目标按钮：

input[type="checkbox"]:checked + .mybtn{ 
    background: #5BC0DE; 
}

来源

2015-05-01 04:15:56 TBB

用主动选择为了这。这是一个工作FIDDLE。

.myBtn:active { 
    background-color: #dd4814; 
}

查询this作为参考。

编辑： 可以使用对焦选择也

.myBtn:focus { 
    background-color: #dd4814; 
}

但在这个颜色将再次改变，如果焦点从按钮丢失。

我想你需要借助Javascript或JQuery来改变按钮点击事件的css规则。

来源

2015-05-01 04:50:56

谢谢。但点击后会消失。我希望它在点击后保持突出显示。 – Becky

我已更新答案.. –

编辑答案：

<html> 
<head> 
<style> 
.myBtn:active{ 
background-color: red; 
} 
.myBtn:visited{ 
background-color: red; 
} 

</style> 
</head> 
<body> 
<button class ="myBtn">Click here to change bgcolor</button> 
</body> 
</html>

来源

2015-05-01 06:23:10

感谢您的回答。但我正在寻找这样做在CSS（没有js）在我的问题解释。 – Becky

对不起，我没有看到。请看我编辑的答案：它使用CSS。你希望按钮的背景颜色只在用户点击时变为红色，或者在用户点击后保持红色？如果您无限期地使用红色，请使用该代码，并且如果您希望在用户停止单击该按钮后红色背景颜色消失，请使用“已访问”伪类删除代码。希望这可以帮助！ –

使用CSS单击时将背景色设置为按钮

回答

相关问题