Question

我如何更改按钮以具有border-radius：6px;当我选择它时，通过激活标记。这是我的HTML代码，我也有CSS。当我<button class:active时，我只获得没有css风格的活动按钮

<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;
}

Answer 1

:表示pseudo-class（pr伪元素）。它不是班级名称的一部分。

:active表示＆＃34;点击＆＃34; （或以其他方式激活）。

如果你想匹配文档中的一个类，那么给它一个普通的类名（最好不要把它与伪类混淆）：

<button class="current"

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

.current { ... }

Answer 2

将此添加到您的css

.button:active{
    border-radius: 6px;
}

在你的html中添加以下代码。注意：：active：hover应该在你的css中，而不是在你的class属性中。因此删除：从您的类属性激活，如下所示

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

     <button class="button" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2') ;">
        Week</button>

     <button class="button" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3') ;">
        Month</button>
</div>

Answer 3

更改

class="button:active"

到

class="button"

并添加到您的CSS

button:active {
// your button:active styling
}

Answer 4

在CSS中，冒号具有特殊含义：它们引入pseudo-classes。

因此，如果要按类选择以下HTML ...

<button class="button:active"></button>

...你必须逃过冒号：

.button\:active

＆＃13;

.button\:active {
  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;
}

＆＃13;

<button class="button:active">Button</button>

＆＃13;

更改按钮：在css中激活

4 个答案: