CSS - How to Get Rid of the Selection Rectangle After Clicking a Link

CSS - Is there a way to get rid of the selection rectangle after clicking a link?

Do you mean the dotted outline of a target?

Try:

:focus {
    outline: 0;
}

This would remove all focus outlines. IT's essentially the same as onclick in JavaScript terms. You might prefer to apply this to a:focus.

HTML/CCS: how to remove the box around link element?

I guess you are talking about the outline box.
You can remove it with:

div{  color: white;  border: none;}
a, a:focus{  color: inherit;  border: inherit;  outline:none;} a:link{  text-decoration: none;}

<html><body><div><a href='/trap'> inherit </a></div>    </body></html>

How to get rid of the selection box around my selection

Check out the outline CSS property. You should specify outline: none for your links in this case. The outline indicates that the given element has focus. You should provide something instead to make keyboard-only navigation possible.

White box after clicking a Link

Use:

a:focus {
    outline: none;
}

However, you might want to use a more specific selector - removing outlines from elements actually impedes accessibility.

How to get rid of box when clicking/tapping on mobile devices?

Sounds to me like you want to remove the color property for mobile only. To achive that you can use @media only screen and (max-width: 600px) property in css which will load the css for all devices that have max-width of 600px. Here you can find more info on that https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

How to remove blue-box-fill when clicking the buttons?

The property you're looking for is tap-highlight-color

-webkit-tap-highlight-color: transparent;

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 to remove the dotted line around the clicked a element in html

Use outline:none to anchor tag class