HTML form field border style - html

Question

I am using bootstrap v3.1.1 on a HTML form (code below). Previously, the form border was fine - however, when I added the span for icons inside the form fields, the border no longer appears distinctly visible. Is there something besides using a border style on the form fields that I can/should use? Thanks in advance.
<form id="login" method="POST" action="/xyz/login" role="form" novalidate>
<div class="form-group">
<label for="username"> Email Address</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="username" id="username" placeholder="Enter username" autocomplete="on" required data-required-msg="Username is required"
autofocus tabindex="1" class="form-control">
</div>
</div>
<div class="form-group">
<label for="password"> Password</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" name="password" id="password" placeholder="Enter password" class="form-control"
required data-required-msg="Password is required" tabindex="2" autocomplete="off" class="form-control">
</div>
</div>
<br>
<div class="form-group">
<button id="submit" class="submit" type="submit" tabindex="3" class="btn btn-default">Login</button>
</div>
</form>

Answer 1

pilot error - I had the following rule in my stylesheet which was causing the problem. Removing this rule solved the issue for me.
input[type=text]{
-webkit-appearance:none;
outline:none;
border:none;
}