Tips for Concealing the Border in a Select Element using HTML and CSS

Question

Tips for Concealing the Border in a Select Element using HTML and CSS

I am trying to achieve a select element without borders before and after the option is selected. I have attempted to use the following CSS code, but unfortunately, it has not been successful.

.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>

https://i.sstatic.net/ZpvAE.png Please advise on where I might be making a mistake. Thank you.

html css bootstrap-4

Answer 1

Answer №1

Give this a try:

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

Here is a demonstration of the code in action:

.custom-select{
  font-family: Roboto;
  font-size: 16px;
  color: lightgrey;
  min-height: 70px;
  width: 98%;
  height: auto;
}

select{
  min-width: 35px;
  min-height: 35px;
  width: 98%;
  border: 0;
  border-width: 0px;
  box-shadow: 3px 3px 6px rgba(0, 20, 0, 0.5);
  border-radius: 3px;
  box-sizing: content-box;
}

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

select:active{
  background-color: lightgrey;
  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>USA</option>
            <option>Canada</option>
            <option>Mexico</option>
        </select>
    </div>

Answer 2

Give this a try:

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

Here is a demonstration of the code in action:

.custom-select{
  font-family: Roboto;
  font-size: 16px;
  color: lightgrey;
  min-height: 70px;
  width: 98%;
  height: auto;
}

select{
  min-width: 35px;
  min-height: 35px;
  width: 98%;
  border: 0;
  border-width: 0px;
  box-shadow: 3px 3px 6px rgba(0, 20, 0, 0.5);
  border-radius: 3px;
  box-sizing: content-box;
}

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

select:active{
  background-color: lightgrey;
  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>USA</option>
            <option>Canada</option>
            <option>Mexico</option>
        </select>
    </div>

Answer 3

Answer №2

apply select:focus {outline: none;}

Answer 4

apply select:focus {outline: none;}

Answer 5

Answer №3

Remember, that's not a border - it's an outline. To get rid of it, you'll need to use outline: none;. For more information on outlines, check out this link.
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 cautious! This code always eliminates the outline (even when the element is not focused). To remove it only when focused, apply :focus.

Keep in mind that Outline and borders differ! Unlike borders, the outline is drawn outside the element's border and may overlap other content. Additionally, the outline does NOT contribute to the element's dimensions; the overall width and height remain unaffected by the outline's width.
In certain browsers, such as Google Chrome, the outline is automatically set when selected on elements like select or button
Also note (from W3Schools) that outline comes with 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

https://i.sstatic.net/QeIfT.jpg

Answer 6

Remember, that's not a border - it's an outline. To get rid of it, you'll need to use outline: none;. For more information on outlines, check out this link.
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 cautious! This code always eliminates the outline (even when the element is not focused). To remove it only when focused, apply :focus.

Keep in mind that Outline and borders differ! Unlike borders, the outline is drawn outside the element's border and may overlap other content. Additionally, the outline does NOT contribute to the element's dimensions; the overall width and height remain unaffected by the outline's width.
In certain browsers, such as Google Chrome, the outline is automatically set when selected on elements like select or button
Also note (from W3Schools) that outline comes with 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

https://i.sstatic.net/QeIfT.jpg

Tips for Concealing the Border in a Select Element using HTML and CSS

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to align these JavaScripts side by side using div elements?

Verify Departure on External Links within Wordpress

CSS: The relative positioned element now functions correctly with the inclusion of overflow-x

ReactStrap: Difficulty concealing navbar item based on screen dimensions

The image will remain hidden until it is fully loaded and ready to be displayed

Intersecting Hyperlink Elements Creating a Hover Effect

Ways to send data to a popup in svelte

The navigation bar is malfunctioning on Bootstrap 4.0.0-beta.2 framework

Getting the present location on Google Maps for the web: A step-by-step guide

"The PHP script was executed despite having a MIME type of "text/html", which is not an appropriate JavaScript MIME type" error

Turn off scroll bar to create a seamless browsing experience on your website

Centering spans and divs is proving to be a challenge, as well as getting the margin-top and margin-bottom properties to function properly

What is causing the animate callback to not properly wait for the completion of the animations?

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

Clicking the button to send the form using JavaScript

What could be causing my footer to appear anywhere but the bottom of the page?

Is it possible for asp.net to include <tbody id="blah" runat="server">?

The issue of ngx-bootstrap tabs persisting even after removal

What steps should I take to create a submenu?

Modify the NAME attribute when clicked using Jquery