hyperlink "active" style not working?

Question

I am trying to make "Forgot password?" hyperlink active in my html. Current screen-shot of my web page is http://prntscr.com/2q6mf8 . And desired screen is http://prntscr.com/2q6mmr . Here "Sign-in" is the class of my global "div". I have the below HTML :

<div class="visible-xs sign-in">    

    <div id="login-form">


        <div class="login-form-header">
            <div class="logo-SI">
                <img src="/web/resources/localadventures/img/la_logo.png" />
            </div>
            <h2 class="page-title-SI green-bg">Local Adventures</h2>
        </div>

        <a href="#" class="login-form-control" style="position: relative; top: 4px;">Create an Account</a>
        <a href="#" class="login-form-control" style="position: relative; top: 4px;">Sign In</a>

        <input type="email" required value="Email Address" style="position: relative; top: 10px;" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
        <input type="email" required value="Password" style="position: relative; top: 10px;" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">

        <br>

        <div>
            <p align="right"><font color="green"><a href="" class="signin-form-control active" style="position: relative; left: 25px; top: 14px;">Forgot your password?</a></font></p>
        </div>

        <br>
        <span class='btn btn-lg btn-success btn-block'>Sign In</span>
        <span class='btn btn-lg btn-primary btn-block'>Facebook Sign In</span>

    </div> 

</div>

My CSS is below:

@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

a {
    color: #2a2a2a;
    text-decoration: none;
    text-align: right;
    margin:1px 25;
}

a:hover { color: #88c425; }

.sign-in .fieldset {
    border: none;
    margin: 0;
}
.sign-in .btn-success {
 border-radius:0px;
 background-color: #88c425
}

.sign-in .btn-success:hover {
background-color: #88c425
}

.sign-in .btn-primary {
 border-radius:0px;
}

.sign-in input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    -webkit-appearance: none;
}

.sign-in input:focus {
  outline: none;
}

input[type="submit"] { cursor: pointer; }

.sign-in.clearfix { *zoom: 1; }
.sign-in.clearfix:before, .clearfix:after {
    content: "";
    display: table; 
}
.sign-in.clearfix:after { clear: both; }

/* ---------- LOGIN-FORM ---------- */

.sign-in #login-form {
    margin: 50px auto;
    width: 300px;
}

.sign-in #login-form h3 {
    background-color: #79a002;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: 14px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}

.sign-in #login-form fieldset {
    background: #fff;
    border-radius: 0 0 -1px -1px;
    padding: 0px;

}

.sign-in #login-form fieldset:before {
    background-color: #fff;
    content: "";
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px;
}

.sign-in #login-form input {
    font-size: 14px;
}

.sign-in #login-form input[type="email"], #login-form input[type="password"] {
    border:none; /* clear previous borders */
    border-bottom: 1px solid #88c425; /* add bottom border */
    padding: 12px 10px;
    width: 300px;
}

.sign-in #login-form input[type="email"] {
    border-radius: 3px 3px 0 0;
}

.sign-in #login-form input[type="password"] {
    border-top: none;
    border-radius: 0px 0px 3px 3px;
}

.sign-in #login-form input[type="submit"] {
    background: #1dabb8;
    border-radius: 3px;
    color: #fff;
    float: right;
    font-weight: bold;
    margin-top: 20px;
    padding: 12px 20px;
}

.sign-in.login-form-header {
    overflow:hidden; /* clearfix */    
    background:#88C425;
}

.logo-SI {
    float:left;
    top:-5px;
}

.page-title-SI {
    margin:0;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align: center;
    color:white;
    font-size: 24px;
    line-height:75px; /* height of the logo image to center text verticaly */
    margin-left:76px;
    position: relative;
    top:-5px;
}

.sign-in.login-form-controls {
    overflow:hidden;
}

.sign-in.login-form-control {
    display:block;
    float:left;
    width:50%;

}
.sign-in.signin-form-control{
    display:block;
    float:right;
    width:50%;
    color: #88c425;

}

.sign-in.login-form-control > span {
    display:block;
    padding:10px;
}

.sign-in.active.login-form-control {
    color:#88C425;
}

As you can observe, i added "active" for "Forgot passowrd?" hyper link in HTML, this is not working!. I have also tried editing

.sign-in.signin-form-control{
    display:block;
    float:right;
    width:50%;
    color: #88c425;

}

in CSS by adding "a" in the style. Nothing seems to work. I want the link to appear in green as soon as the page loads. What change needs to be done to fix this?.

Answer 1

This CSS selector:

.sign-in.active.login-form-control

does not match the classes of your HTML element:

<a class="signin-form-control active">Forgot your password?</a>

It seems that the selector should be:

.signin-form-control.active

Working Example (jsFiddle)