entire textbox isn't highlighted in asp.net mvc form - forms

Question

Login form
This is the code for the login form. From the picture it can be seen that the entire textbox isn't highlighted. What am I missing?
<div class="login">
<div class="login-form">
#using (Html.BeginForm("Login", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h2 style="margin-left:-15px">Login</h2>
<div id="maintenance"></div>
<div class="bg-danger text-danger FailureCont">
</div>
<div class="form-group">
<span id="BodyContent_LoginCtrl_UserNameRequired" title="Username is required." class="bg-danger text-danger block" style="visibility:hidden">Username is required.</span>
<div class="input-group login-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<div>#Html.TextBoxFor(m => m.UserName, new { #class = "form-control", placeholder = "Email", aria_required = true })</div>
#*#Html.ValidationMessageFor(m => m.UserName, "", new { #class = "text-danger" })*#
#* <input name="ctl00$BodyContent$LoginCtrl$UserName" type="text" id="BodyContent_LoginCtrl_UserName" tabindex="1" class="form-control" placeholder="Username" autocomplete="off" disabled="disabled" data-validate="placeholder required" />*#
</div>
</div>
<div class="form-group">
<span id="BodyContent_LoginCtrl_PasswordRequired" title="Password is required." class="bg-danger text-danger block" style="visibility:hidden;">Password is required.</span>
<div class="input-group login-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
#*<input name="ctl00$BodyContent$LoginCtrl$Password" type="password" id="BodyContent_LoginCtrl_Password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off" disabled="disabled" data-validate="placeholder required" />*#
#Html.PasswordFor(m => m.Password, new { #class = "form-control", placeholder = "Password" })
</div>
</div>
<div class="form-group">
<div class="col-sm-6 small-side-padding">
<button type="button" class="btn btn-secondary btn-block" id="" onclick="location.href='#Url.Action("Register","Account")'">Register</button>
</div>
<div class="col-sm-6 small-side-padding">
<input type="submit" class="btn btn-primary btn-block" id="bSummit" value="Login" />
#*<input type="submit" name="ctl00$BodyContent$LoginCtrl$LoadingLoginButton" value="Login" id="BodyContent_LoginCtrl_LoadingLoginButton" class="btn btn-primary btn-block hidden"/>*#
</div>
</div>
#*<input type="submit" name="ctl00$BodyContent$LoginCtrl$LoginButton" value="Login" class="btn btn-primary btn-block" />*#
<div class="form-group text-center forgottenCont">
Need help with your <a class="forgottenpwd" href="/Account/ForgotPassword.cshtml">username</a> or <a class="forgottenpwd" href="#Url.Action("ForgotPassword","Account")">password</a>?
</div>
}
</div>
<div class="text-center login-icons hidden-ph">
<i class="fa fa-2x fa-twitter"></i>
<i class="fa fa-2x fa-linkedin"></i>
<i class="fa fa-2x fa-facebook"></i>
</div>
</div>
I'm not sure why the entire textbox isn't highlighted. Can someone please tell me where I'm going wrong. Thank you.

Answer 1

.login-group {
background: #fff;
border: 1px solid #ccc;}
.login-group .form-control {
border: 0;}
#Nimmi: Not sure if any style is overridden here, but thanks :)