How to Remove the Border Highlight on an Input Text Element

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

How to remove focus border (outline) around text/input boxes? (Chrome)

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

How to remove border highlight on an select after press it

As i guessed, its due to bootstrap styles:

.form-control:focus /* => from bootstrap css */
{
 ...
 outline: 0;
 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* => this cause the highlight! */
}

it sets a box-shadow for .form-control:focus. you have to override it in your css:

input:focus,select:focus, .form-control:focus,textarea:focus,button:focus {  outline: none !important;  box-shadow: none !important;}
body {  padding: 40px 20px 20px 20px;}
.qa-collapse {  background-color: rgb(245, 245, 245);}
.qa-input {  border-top-left-radius: 50px;  border-bottom-left-radius: 50px;  border-right: none !important;  border: 1px solid #F2F2F2;  width: 82%;  padding: .25rem .75rem;  font-size: 1rem;  line-height: 1.5;  color: #495057;  background-color: #fff;  background-image: none;  background-clip: padding-box;  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.qa-search {  border-top-right-radius: 50px;  border-bottom-right-radius: 50px;  background-color: #E01E34;  border: 1px solid #E01E34;  padding: .2rem .75rem;}
input[type="text"].qa-input::-webkit-input-placeholder {  color: ;  font-size: 80%;  font-family: PosLight;}
.qa-search img {  margin-top: -3px;}
.qa-form-inline {  display: -ms-flexbox;  display: flex;  -ms-flex-flow: row wrap;  flex-flow: row wrap;  -ms-flex-align: center;  align-items: center;}
.qa-track-trace p {  font-family: PosLight;  font-size: 12px;  padding: 0 2.6rem 0 0.7rem;  color: #999999;}
.nav-tabs {  border: 0px;}
.nav-tabs .nav-link.active {  border: 0px;  border-top-right-radius: 0;  border-top-left-radius: 0;  background-color: transparent;  border-color: transparent;}
.nav-tabs .nav-link:hover {  border-color: transparent;}
.nav-tabs .nav-link {  border: 0px;  border-top-right-radius: 0px;  border-top-left-radius: 0px;  background-color: transparent;}
.qa-send-lp-tab {  color: rgba(0, 0, 0, .5);  display: block;  padding: 0rem 1rem;}
.qa-send-lp-tab:hover {  color: rgba(0, 0, 0, .7);}
.qa-send-lp-tab.active {  color: #E11F34 !important;}
.qa-track-trace p {  font-family: PosLight;  font-size: 12px;  padding: 0 2.6rem 0 0.7rem;  color: #999999;}
.qa-input-full {  border-radius: 50px;  border: 1px solid #F2F2F2;  width: 100%;  padding: .25rem .75rem;  font-size: 1rem;  line-height: 1.5;  color: #495057;  background-color: #fff;  background-image: none;  background-clip: padding-box;  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
input[type="text"].qa-input-full::-webkit-input-placeholder {  color: ;  font-size: 80%;  font-family: PosLight;}
input[type="text"].qa-input-full::-webkit-input-placeholder {  color: ;  font-size: 80%;  font-family: PosLight;}
.qa-dropdown {  border-top-right-radius: 50px;  border-bottom-right-radius: 50px;  background-color: #E01E34;  border: 1px solid #E01E34;  padding: .20rem .75rem;}
.qa-dropdown img {  margin-top: -3px;}
select.form-control {  -webkit-appearance: none;  -moz-appearance: none;  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff;  /* background: url(../img/dropdown-2.svg); */  /* background: url(../img/dropdown.svg); */  /*background-position: 91.5% 50%; */  background-position: 95% 50%;  background-repeat: no-repeat;}
select.form-control:not([size]):not([multiple]) {  height: 35px;  border: 1px solid #F2F2F2;  border-radius: 50px;  border: 1px solid #F2F2F2;  width: 100%;  padding: .25rem .75rem;  line-height: 1.5;  color: #495057;  background-color: #fff;  background-clip: padding-box;  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.styled-select {  font-size: 12px;  font-family: 'PosLight';}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  <form class="qa-form-inline mt-2"><select name="dbType" id="selectOptions" class="form-control required styled-select">    <option value="option-select" disabled selected>Service</option> <option value="option-1" class="option-grams">Example</option> <option value="option-2" class="option-grams">Example</option> <option value="option-3" class="option-grams">Example</option> <option value="option-4" class="option-grams">Example</option> <option value="option-5" class="option-grams">Example</option> <option value="option-6" class="option-grams">Example</option> <option value="option-7" class="option-grams">Example</option> <option value="option-8" class="option-grams">Example</option>   </select></form>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

How can I remove the black outline around my input areas?

Add outline: none; to your css for the input element.

.form-input-styling {
  border-radius: 0 2em;
  padding: 0 10px;
  width: 50%;
  border: none;
  outline: none;
  line-height: 2em;
  margin-bottom: 20px;
  background-color: #f25b43;
}

How to remove an input border?

You can remove it with outline:none, but it creates accessibility issues.

input {  font-size: 300%;  border-width: 10px;  border-style: solid;  border-radius: 30px;  outline:none;}

<input>

Remove input blue outline color

According to MDN

The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.

So when we set outline to none or 0, we are actually setting 3 properties

outline-style
outline-width
outline-color

This is obtain from chrome developer options:

outline:none; will set:

outline-color: initial;
outline-style: none;
outline-width: initial;

outline:0; will set:

outline-color: initial;
outline-style: initial;
outline-width: 0px;

In your case setting outline:none should do a trick.

Hope this helps. Happy Coding!!!

Remove outline of input field with form control

Try overriding form-control styles like this:

.form-control:focus {
  border-color: #ced4da; /* default B5 color or set your own color*/
  border: none !important; /* if you want to remove borders at all*/
  outline: none !important;
  box-shadow: none !important;
}

How to Remove the Border Highlight on an Input Text Element