How to hide the border HTML CSS Select?

Question

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.

Yout problem is with the outline. So you can make it like: outline: none; (https://developer.mozilla.org/en-US/docs/Web/CSS/outline) — HSLM, Dec 03 '20 at 09:08
These are browser specific stylesheets, have you checked how your styles look in a different browser? I assume you do this in chrome (looks like chrome :focus stylesheet for inputs/selects). You can use the browsers element inspector to check what styles are being used. It might be even better you use a predefined stylesheet like [bootstrap](https://getbootstrap.com/). — Definitely not Rafal, Dec 03 '20 at 09:13
Hi! remember to accept the most exhaustive answer in order to indicate to the next users of the platform which is the most detailed answer. — Giuppox, Dec 03 '20 at 13:34

score 1 · Accepted Answer · answered Dec 03 '20 at 09:13

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>

score 1 · Answer 2 · answered Dec 03 '20 at 09:27

1

set select:focus {outline: none;}

answered Dec 03 '20 at 09:27

Fady Bark

101
2
6

Giuppox · Answer 3 · 2020-12-03T09:43:07.560

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

How to hide the border HTML CSS Select?

3 Answers3