更改按钮:在CSS中处于活动状态 [英] Change button:active in css

问题描述

如何更改按钮的边框半径:6px；并由活动标记，当我将其选中.这是我的HTML代码，我也有CSS.当我使< button class:active 时，我只会获得没有CSS样式的活动按钮

how i can change button to have border-radius: 6px; and to by active marked when i will select it. Here is my HTML code and i also have CSS. When i make <button class:active i get only active button without css style

<div align="center">
     <label>Period selection</label>
     <button class="button: active" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1');">Day</button>
     <button class="button: active" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2');">Week</button>
     <button class="button: active" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3');">Month</button>
</div>

.ctButton,
.button,
body div.ui-dialog div.ui-dialog-buttonpane div.ui-dialog-buttonset button.ui-button,
.ui-dialog .ui-button, 
a.button,
#ctPageContent a.button,
#ctPageContent a.button:hover {
     background-color: #2B2B2B;
     border: 0px;
     display: inline-block;
     padding: 3px 10px 4px;
     color: #fff;
     text-decoration: none;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     border-radius: 6px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
     border-bottom: 1px solid rgba(0,0,0,0.25);
     position: relative;
     cursor: pointer;
     margin: 4px 2px;
}

推荐答案

:表示

The : indicates a pseudo-class (pr pseudo-element). It is not part of the class name.

:active 表示正在被点击"(或以其他方式激活).

:active means "While being clicked on" (or otherwise activated).

如果要匹配文档中的一个类，请为其指定一个常规的类名(最好不要将其与伪类混淆):

If you want to match a class in the document, then give it a regular class name (and preferably not one that could be confused with a pseudo-class):

<button class="current"

然后在CSS中使用类选择器:

Then use a class selector in the CSS:

.current { ... }

这篇关于更改按钮:在CSS中处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！