15ongm 15ongm - 5 months ago 17
HTML Question

Bootstrap: Input text border turning black before applying CSS-applied grey?

Here's a visualization of my problem:
enter image description here

I used CSS to make the borders light grey, yet for a millisecond they default to a black border before turning light grey. I would really appreciated if someone could give me a tip on this!

HTML file

<div class="container-fluid">
<div class="container">
<form>
<div class="row page-header">
<div class="col-lg-10">
<div class="form-group">
<input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" id="Remove-Button" class="btn btn-default" aria-label="Remove">
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
</button>
</div>
<input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
<div class="input-group-btn">
<button type="button" id="Add-Button" class="btn btn-default" aria-label="Add">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>


CSS borders part

/*Take away default black borders*/
input[type="text"] {
outline: none;
box-shadow: none !important;
border: none;
}

/*Put grey borders when hover or click on input box*/
input[type="text"]:focus,
input[type="text"]:hover {
border: 1px solid #cccccc;
border-radius: 8px;
}


I'm using Bootstrap and running my HTML file on Chrome if that's relevant.

JSFiddle of my problem

Answer

If you change:

input[type="text"]:focus,
input[type="text"]:hover {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

To:

input[type="text"]  {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

Your gray outline remains, the color glitch is removed, but on focus your outline does change blue.