CSS按钮高亮显示单击后 [英] CSS Button Highlight post click

问题描述

我的视图中有三个按钮.我希望不仅在单击过程中突出显示按钮，还希望发布单击(除非再次单击).我知道如何突出显示单击时的按钮，但我希​​望突出显示持续到新单击.有什么办法吗?

I have three buttons in my view. I want the button to be highlighted not only during a click but post a click (unless another click is made). I know how to highlight the button on click but I want the highlight to last until a new click is made. Is there any way to do it??

推荐答案

这里是一个小提琴，应该在纯CSS中进行.您将无法使用实际的按钮.但是您可以设置标签的样式，因为我必须看起来像按钮.

Here is a fiddle that should do it in pure CSS. You will not be able to use actual buttons. But you can style the label as I have to look like buttons.

注意:这在较旧的浏览器(例如IE8)中将无法正常工作

NOTE: This will not work properly in older browsers such as IE8

http://jsfiddle.net/ghvst26b/

HTML

<input type="radio" name="Button" class="ButtonState" checked id="Button1" value="1"/>
<label class="Button" for="Button1">Button 1</label>
<input type="radio" name="Button" class="ButtonState" id="Button2" value="2"/>
<label class="Button" for="Button2">Button 2</label>
<input type="radio" name="Button" class="ButtonState" id="Button3" value="3"/>
<label class="Button" for="Button3">Button 3</label>

CSS

.ButtonState{display:none}
.Button{padding:3px; margin:4px; background:#CCC; border:1px solid #333; cursor:pointer;}
.ButtonState:checked + .Button{background:#fff;}

这篇关于CSS按钮高亮显示单击后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！