Hide the unattractive focus border in Bootstrap-Select

I've been trying to remove a black border surrounding my selectpicker list box:

https://i.sstatic.net/V2rNq.png

Even without focus, the border persists:

https://i.sstatic.net/ncoDM.png

Despite using outline: none; in my CSS, the unwanted border remains. Here is the code snippet:

.customSelect{
  border: 1px solid #ced4da !important;
  color: #495057 !important;
}
.customSelect:hover{
  background-color: #f8f9fa !important;
}
.customSelect:focus{
  outline:none !important;

  /* also tried adding in :
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  */

Here's the HTML for the input:

<select name="function_title_id" 
id="function_title_id"  
title="Please select..."
class="form-control selectpicker" 
data-live-search="true"
data-style="customSelect"
data-dropup-auto="false"
disabled>
</select>

Any suggestions on how to resolve this issue? Thanks!

UPDATE: For further reference, you can view my problem using the following fiddle link: https://jsfiddle.net/jocxaqe9/

htmlcssbootstrap-4bootstrap-selectpicker

Answer №1

In Bootstrap 5:

To eliminate the shadow, simply apply the class "shadow-none".

Answer №2

After much trial and error, I have discovered a solution to this issue. It may be considered a bit of a workaround, but it appears to effectively resolve the problem:

  1. To address the select input, you must specify the following attributes:

    • data-style-base="form-control" -- Ensure that the form-control class is retained as well!
    • data-style="" -- Alternatively, assign any custom class for further styling

  2. Incorporate the following CSS rules:

.bootstrap-select .form-control:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner > div.filter-option-inner-inner:focus {
    outline: 0px none #fff !important;
}

You can view a demo on Fiddle here: https://jsfiddle.net/sak06om8/

Answer №3

This solution is effective for Bootstrap 5 in the year 2022 It eliminates all focus shadows

*:focus {
    box-shadow: none !important;
}

Ensure that this code snippet is placed after the bootstrap css file

Answer №4

Make sure to include the following CSS code in your stylesheet.

.bootstrap-select button.dropdown-toggle:focus {
    outline: none !important;
}

It's important to note that when using this plugin, a button is created within a div with the class bootstrap-select, and only relies on data from the select element to populate its dropdown. Therefore, applying styles directly to the select tag will not have any effect.

Answer №5

Applying outline: none and box-shadow: none is all you need to achieve the desired effect in your CSS. However, make sure you are adding the class customSelect to the select element correctly:

<select name="function_title_id" 
    id="function_title_id"  
    title="Please select..."
    class="form-control selectpicker customSelect" 
    data-live-search="true"
    data-style="customSelect"
    data-dropup-auto="false"
    disabled>
</select>

Answer №6

Include the appropriate selector in your CSS code.

.selectpicker:focus {
  outline: none;
  border-color: red;
}
<select name="function_title_id" 
id="function_title_id"  
title="Please select..."
class="form-control selectpicker" 
data-live-search="true"
data-style="customSelect"
data-dropup-auto="false">
<option>1</option>
<option>2</option>
</select>

Answer №7

Have you noticed the issue? The customSelect is designated as your data-style, while your class is defined as selectpicker. Simply switch out customSelect with selectpicker.

.customSelect{
  border: 1px solid #ced4da !important;
  color: #495057 !important;
}
.customSelect:hover{
  background-color: #f8f9fa !important;
}
.customSelect:focus{
  outline:none !important;

  /* I also attempted to add:
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  */

<select name="function_title_id" 
        id="function_title_id"  
        title="Please select..."
        class="form-control selectpicker" 
        data-live-search="true"
        data-style="customSelect"
        data-dropup-auto="false"
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for choosing specific characters from a string using JavaScript

When dealing with URL strings like "example.com/Apps/Visitor/visitscanner" , "example.com/Apps/Seatings/visitscanner I am interested in extracting the directory name following the "http://example.com/Apps/" For the above examples, if the URL string is " ...

javascripthtmlstring

Upon initially visiting the site, the @font-face fails to load and requires a manual refresh or reload to appear correctly

After configuring the CSS file using the fontface generator from fontsquirrel.com and uploading the font files to the correct directory, the fonts on my website function properly. However, there is an issue where the fonts do not display the first time a u ...

htmlcssfontsrefreshfont-face

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Within my code, I have a designated DIV element that serves as the root node for applying knockout bindings like so: ko.applyBindings(viewModel, document.getElementById('myContainerDiv')); In all of my viewmodel types, there is a generic post m ...

javascripthtmlknockout.jsjquery-blockui

Angular 2: Dealing with Missing Image Loading

When viewing an HTML file containing the following code: <div> <img src="New-Google-Logo.png"/> </div> The image file New-Google-Logo.png is expected to load from the same folder as the HTML file. However, after running ng s ...

htmlcssangular

Issue with Google Maps: undesired change in map size

Welcome to my app! Check out the link to my app here: http://jsbin.com/axeWOwAN/1/edit If you prefer a full-screen view, click here: http://jsbin.com/axeWOwAN/1 I'm encountering an issue with the map on the second page of my app. The map works perf ...

javascriptjqueryhtmlcssgoogle-maps

What's the best way to capture an element screenshot using JavaScript?

I'm working on developing a unique gradient selection application. One of the exciting features I would like to incorporate is the ability for users to save their chosen gradients as digital images (.jpg format) directly onto their computers. When the ...

javascripthtmlscreenshot

Is there a way to transform these buttons into a sidebar menu instead?

I'm working on an admin home page in HTML that currently displays buttons like "View Personal Information" and "View Expense Claims". I'd like to transform these buttons into a sidebar menu. Can someone guide me on what CSS code I need to add? Yo ...

htmlcss

Switching images with Jquery

Seeking help to create an FAQ page using HTML, CSS, and jQuery. My goal is to rotate an arrow when a question is opened and revert it back when another question is clicked. I've successfully achieved this with <p> tags but facing issues with the ...

jquerycsshtml

Using PHP to fill input field with text output

I've been searching for an answer to this question, but so far I haven't found one. In my database, I input two pieces of data and receive a success or failure outcome. What I want is to have a "Submit" button that triggers my PHP query (which ...

phpjavascripthtmlajaxdom

Changing CSS attributes with jQuery when conditions are met

After creating menus with expandable items that change style upon clicking, I encountered an issue where the styling changes were not being applied correctly. To address this problem, I followed Sushanth's suggestion and replaced $this with $(this), ...

jquerycssif-statement

What is the process of invoking a function in ajax from a web service that includes a PDF attachment?

I know how to download a file in my web services, but I'm unsure of how to call this function using ajax. Within my datatable, there is a button column. When I click on a button within the table, I want to be able to download a PDF file from the SQL ...

c#htmlasp.netajax

Issue with Jquery .scroll method not triggering display:none functionality

Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...

javascriptjqueryhtmlcss

Different ways to personalize marker designs and incorporate numbers into Folium markers

I came across a technique to include numbers within markers by utilizing plugins.BeautifyIcon on this site - Folium markers with numbers inside. However, I am searching for an alternative method to incorporate numbers without relying on plugins.BeautifyIc ...

pythonhtmlcssleafletfolium

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

htmlcss

When a selection is made, the tab changes to a new URL. However, what happens if the tab is closed during the next selection change?

Is there a way for me to detect if the user has closed the browser tab that I opened and redirected to a URL? Here is the code I have so far. It checks if the user changes the value of a select dropdown, then it verifies whether the browser window was alr ...

javascriptjqueryhtml

Send the form via ajax

I am in the process of creating a unique application for my university, which is essentially a social network. One key feature I need to implement is the ability for users to add comments, which involves inserting a row into a specific database. To achieve ...

javascriptjqueryhtmlajaxforms

I would like to split the window into four columns and populate each one with images

I've been struggling to create 4 columns in my design, but I just can't seem to make it work. I've tried setting the height to 100% in each div, but it didn't produce the desired result. I was able to achieve it with colors, but not wit ...

htmlcssbootstrap-5

The div "tags" cannot be positioned beneath the photo as it is automatically located alongside the image inside the div

Is there a way to place the "Tags" div beneath an image, creating a bar of tags below it? I've been struggling to position it properly without disrupting the flow of the page. Using absolute positioning is not an option as it would break the layout. A ...

css

An alternative method to confirm the checkbox selection without physically clicking on it

Currently, I'm in the process of creating a basic to-do list and have been attempting to connect the task with its corresponding checkbox. My goal is for the checkbox to automatically be checked when the task is clicked. Instead of using HTML to add ...

javascripthtmleventscheckboxlabel

The CSS code isn't functioning properly on both desktop and mobile views

Here is what I desire to achieve: https://i.sstatic.net/8H4fv.png The CSS code I have is: And the HTML code looks like this: <body> <div class="contanier"> <div id="rightcol">Right Section</div> <div id="content">Cont ...

htmlcssiphone