Select Menu Option Border None

How to remove border of drop down list : CSS

The most you can get is:

select#xyz {
   border:0px;
   outline:0px;
}

You cannot style it completely, but you can try something like

select#xyz {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Select menu option border none

The dropdown of a select is part of what's called the ShadowDOM. In the current CSS specs, level 3, there's no way to target most ShadowDOM elements. You can read the specs on the ShadowDOM here, though there's not much in there regarding what you want.

Chrome has a few proprietary selectors to change some shadowDOM elements, but not all. Firefox has even fewer (as far as I know), and Opera has none. IE is probably just as bad or worse.

Your best bet with compatibility in mind is to use a Jquery plugin to mimic the select using other HTML elements if you really want to style it. Here's a neat one.

How to hide the border HTML CSS Select?

Here try this:

.cutom-select select:focus{
    outline: none !important;
}

working example:

.custom-select{
  font-family: Raleway;
  font-size: 18px;
  color: grey;
  min-height: 75px;
  width: 99%;
  height: auto;
}

select{
  min-width: 40px;
  min-height: 40px;
  width: 99%;
  border: 0;
  border-width: 0px;
  box-shadow: 5px 5px 10px rgba(0, 40, 0, 0.5);
  border-radius: 5px;
  box-sizing: content-box;
}

select option:checked{
  background-color: grey;
  border-width: 0px;
  box-sizing: content-box;
  border: 0;
}

select:active{
  background-color: grey;
  border-width: 0px;
  box-sizing: content-box;
  border: 0;
}

.cutom-select select:focus{
    outline: none !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="cutom-select">
        <select>
            <option>India</option>
            <option>India</option>
            <option>India</option>
        </select>
    </div>

Select box : remove borders

select#xyz
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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>

HTML/CSS - remove/recolor border of dropdown options

The answer is: you can't because css can't modify options' style.

But you can use a list and make it act like a dropdown to be free to stylize it:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <label>One</label>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</body>
</html>
<style>
    ul {
        display: table;
        list-style: none;
        padding: 0;
    }

    ul li {
        display: block;
    }
</style>
<script>
    $("ul li").slideUp();
    $("label").click(function () {
        $("ul li").slideToggle();
    });
    $("ul li").click(function () {
        $("label").text($(this).text());
        $("ul li").slideToggle();
    });
</script>

    $("ul li").slideUp();    $("label").click(function () {        $("ul li").slideToggle();    });    $("ul li").click(function () {        $("label").text($(this).text());        $("ul li").slideToggle();    });

    ul {        display: table;        list-style: none;        padding: 0;    }
    ul li {        display: block;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <label>One</label>    <ul>        <li>One</li>        <li>Two</li>        <li>Three</li>        <li>Four</li>        <li>Five</li>    </ul>