Question

这是我的代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Practice</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
    <div class="firstSection">

    </div>
    <div class="secondSection">
        <div class="correctForm">
            <form action="" method="post" name="Login_Form">       
                <h3 class="form-signin-heading">Login</h3>
                  <hr class="colorgraph"><br>
                  <input type="text" class="form-control" name="Username" placeholder="Username" required="" autofocus="" />
                  <input type="password" class="form-control" name="Password" placeholder="Password" required=""/>   
                  <button class="btn btn-lg btn-primary btn-block newButton"  name="Submit" value="Login" type="Submit">Login</button>              
            </form>     
        </div>
    </div>
</body>
</html>

CSS

body{
    background-color: #956BBB;
}
.firstSection{
    position: absolute;
    top: 5%;
    left: 2%;
    background-color: #C3ACD8;
    width: 65%;
    height: 90%;
    margin-bottom: 10px;
    border-radius: 50px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.secondSection{
    position: absolute;
    top: 5%;
    left: 70%;
    background-color: #C3ACD8;
    width: 28%;
    height: 90%;
    margin-bottom: 10px;
    border-radius: 50px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.correctForm{
    position: relative;
    margin-top: 30%;
    margin-right: 15px;
    margin-left: 15px;
}

.form-signin-heading {
  text-align:center;
  margin-bottom: 20px;
}

.colorgraph {
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
input[type="text"] {
  margin-bottom: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="password"] {
  margin-bottom: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.newButton{
    background-color: #956BBB;
}
.newButton:hover{
    background-color: #755592;
}
.newButton:active{
    background-color: yellow;
}

现在，我希望将登录按钮的活动状态颜色设置为黄色。但按住按钮的同时显示为深蓝色。我知道这就是它的完成方式，但我不知道我得到的问题是什么请告诉我如何解决它.. 提前谢谢！

Answer 1

看看Chrome Dev Tools的强大功能：

Bootstrap定义.btn-primary:active:hover，它比newButton:active更具体。

将选择器更改为更具体的选项（例如.newButton.newButton:active）会修复它。

CSS-无法设置活动状态

1 个答案: