Remove the input highlighted box on click

Question

I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?

<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">

<input type="text" class="form-control" placeholder="Enter here" readonly>

In css,

.form-control:focus {
    outline: none;
}

I meant if it's bootstrap, add the bootstrap tag with the version — Temani Afif, Nov 13 '18 at 00:24

score 0 · Accepted Answer · answered Nov 13 '18 at 01:16

First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>
  .form-control:focus {
    box-shadow: none;
    border: 1px solid #ccc;
  }
</style>
<input type="text" class="form-control" placeholder="Enter here">

Remove the input highlighted box on click

1 Answers1