How to hide the border HTML CSS Select? [duplicate] - html

Question

This question already has answers here:
How to remove border of drop down list : CSS
(4 answers)
Closed 2 years ago.
I want select without border before and after option selected.
I have tried below css code but unfortunately without success.
.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;
}
<div class="cutom-select">
<select>
<option>India</option>
<option>India</option>
<option>India</option>
</select>
</div>
Please suggest me where am I doing mistake?
Thanx.

Answer 1

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>

Answer 2

set select:focus {outline: none;}

Answer 3

Note that that is not a border! it is an outline. To remove it you have to use outline: none;. To know more about outlines take a look here.
something like this
.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;
outline: none; /* <-------[added line] (if it doesn't work like this adding !important) */
}
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;
}
<div class="cutom-select">
<select>
<option>India</option>
<option>India</option>
<option>India</option>
</select>
</div>
Be careful! this code always removes the outline (also when the element is not focuses). To remove it only when focused you should use :focus.
Note that Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
In some browsers (like google chrome) outline is set as default, when selected, on some elements like select or button
Note also (from w3school) that outline has the following properties.
dotted - Defines a dotted outline dashed - Defines a dashed
outline solid - Defines a solid outline double - Defines a
double outline groove - Defines a 3D grooved outline ridge -
Defines a 3D ridged outline inset - Defines a 3D inset outline
outset - Defines a 3D outset outline none - Defines no outline
hidden - Defines a hidden outline