Unable to locate the CSS for the selected dropdown button in Bootstrap

Seeking help to locate the CSS code responsible for the blue border on a select dropdown button in Bootstrap. It seems simple, but I'm unable to find it.

If anyone knows where this specific class is located in the CSS file, please share your insights!

<form action="#" method="post" id="demoForm" class="demoForm">
  <!--<fieldset>-->
    <select class="selectpicker" name="category">
      <option value="AFR">Afrika</option>
      <option value="CA">Amerika (Mitte) & Karibik</option>
      <option value="NA">Amerika (Norden)</option>
    </select><br/>
    <select class="selectpicker" name="choices" id="choices">
      <option value="ae">Äthiopien</option>
      <option value="bo-mo-si">Botswana, Mosambik & Simbabwe</option>
      <option value="ma-ma-sey">Madagaskar, Mauritius & Seychellen</option>
      <option value="nam">Namibia</option>
      <option value="na">Nordafrika (Küste)</option>
      <option value="na-l">Nordafrika (Landesinneres) & Sahara</option>
      <option value="ka">Kamerun</option>
      <option value="ke">Kenia & Tansania</option>
      <option value="ma">Mali</option>
      <option value="ru-ug">Ruanda & Uganda</option>
      <option value="sa">Südafrika</option>
      <option value="wa">Westafrika</option>
    </select>
 <!-- </fieldset>-->
</form>

Access the demo here

csstwitter-bootstrapbootstrap-selectbootstrap-selectpicker

Answer №1

Ensure that the CSS property outline: none is applied to both .dropdown-toggle and .dropdown li a.

.demoForm .bootstrap-select .dropdown-toggle:focus,
.demoForm .bootstrap-select.btn-group .dropdown-menu li a {
    outline: none !important;
}


.demoForm .bootstrap-select .dropdown-toggle:focus,
.demoForm .bootstrap-select.btn-group .dropdown-menu li a {
    outline: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://the-backpacker.net/scripts/js/bootstrap-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://the-backpacker.net/scripts/css/bootstrap-select.css" rel="stylesheet"/>
<form action="#" method="post" id="demoForm" class="demoForm">
  <!--<fieldset>-->
  <select class="selectpicker" name="category">
    <option value="AFR">Afrika</option>
    <option value="CA">Amerika (Mitte) & Karibik</option>
    <option value="NA">Amerika (Norden)</option>
  </select><br/>
  <select class="selectpicker" name="choices" id="choices">
    <option value="ae">Äthiopien</option>
    <option value="bo-mo-si">Botswana, Mosambik & Simbabwe</option>
    <option value="ma-ma-sey">Madagaskar, Mauritius & Seychellen</option>
    <option value="nam">Namibia</option>
    <option value="na">Nordafrika (Küste)</option>
    <option value="na-l">Nordafrika (Landesinneres) & Sahara</option>
    <option value="ka">Kamerun</option>
    <option value="ke">Kenia & Tansania</option>
    <option value="ma">Mali</option>
    <option value="ru-ug">Ruanda & Uganda</option>
    <option value="sa">Südafrika</option>
    <option value="wa">Westafrika</option>
  </select>
  <!-- </fieldset>-->
</form>

Answer №2

Include outline:none in the styling for .dropdown-menu.

.dropdown-menu a:focus { outline: none; }

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

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

How can I dynamically change the height of a .test div based on the browser width and height? I want the value to update whenever the browser is resized. $(document).ready( function() { window.onresize = function(event) { resizeDiv(); ...

javascriptjqueryhtmlcss

Why is Google Chrome cutting off parts of my website?

Has anyone encountered the strange rendering issue in Google Chrome? Check out this bug here http://community.mediabrowser.tv/uploads/site_1/126/annoying_rendering_bug.jpg I sometimes experience it when I visit What is causing this issue? Is there a way ...

htmlcssgoogle-chrome

Incorporate a genre twist in animated films

Is there a way to implement an animated feature where the letters appear one by one in between a sentence, similar to what is seen on this page? On the linked page, there is a sentence displayed inside a banner that reads: Create meaningful documents Cr ...

javascriptjqueryhtmlcssanimation

optimal application of css with jquery

I have a question about using jQuery to set the padding of a class or id. I am able to successfully change the height of an element with this code: $('.menu').css({ height: '90px' }); But now, I need to apply a specific CSS rule in jQ ...

javascriptjqueryhtmlcss

The X-axis remains visible even after being hidden and still functions properly in mobile view

I've been encountering some minor bugs while working on a website recently. One particular issue I'm struggling to fix involves the x-axis not hiding despite attempts in CSS, especially on mobile view. body { overflow-x: hidden; overflo ...

htmlcssweb

Learn how to use Bootstrap 4 to selectively filter through a list by their data attribute values

I am currently working with a PHP form that looks like this: <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <label class="assistive-text" for="s"> &l ...

twitter-bootstrapbootstrap-4

Please select the links located beneath the see-through triangular or polygonal shapes

Review the code snippet provided at the following link: http://jsfiddle.net/q8Ycz <div style="background-color: red; width: 200px;" onclick="alert('behind')"> <div><a href="test">test test test test test test test test test ...

htmlcsssvg

Is there a way to use Jquery to determine if a parent div contains a scroll

I'm trying to find a jQuery example that checks if any parent div has a scroll bar, but I can't seem to locate a helpful one. Here is the code snippet I am working with: <div> <div class="heading"> <div class="visit ...

javascriptjqueryhtmlcss

Issue "The only acceptable numeric escape in strict mode is '' for styled elements in Material-UI (MUI)"

Attempting to utilize the numeric quote for quotation marks, I encountered an issue: 'The sole legitimate numeric escape in strict mode is '\0` The snippet of code causing the problem can be seen below: export const Title = styled(Typogra ...

javascriptcssreactjsmaterial-ui

Ways to move an element beyond specified padding using CSS

In this image below, I have added a 10px padding to the container as it is usually needed. However, for the headings (blue) I do not want any padding. Is there a way to make the heading extend over the padding? https://i.sstatic.net/DeSHZ.jpg I prefer no ...

htmlcss

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

cssjsptwitter-bootstrapsass

Is there a concept of negative margin "wrapping"?

I am currently working on the website . I am facing an issue where the left arrow is not appearing in the same position as the right arrow. When I try to mirror the same adjustment I made for the left arrow by using margin-left: -75px, it seems to 'wr ...

htmlcss

Getting the next sibling element with Selenium: A complete guide

Having trouble targeting a textbox after the label "First Name" in a list to enter a first name. Here's what I've tried: WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::d ...

javahtmlcssseleniumautomation

Utilizing CSS to create a zoom effect on hover for an image while preserving its original size was successful, however, the issue arises as only a corner of the image is visible

On my webpage, I have implemented an image that zooms in slightly when hovered over. Unfortunately, this animation has caused the image to only display one part regardless of whether hover is activated or not. I've attempted to troubleshoot by adjusti ...

htmlcssbootstrap-4

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

javascriptjquerycss

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, ...

htmlcssreactjsmaterial-ui

Tips for reducing the impact on performance caused by cookie consent code

Experimenting with basic HTML to analyze the impact of cookie consent code. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="determine page l ...

htmlcsspagespeedgoogle-pagespeedcookieconsent

Is it possible to eliminate a style that was applied using the .css() method?

Currently, I am using jQuery to modify the CSS and would like to know how to remove the styling that is being applied based on the input value provided: If the color is not '000000', then change the background-color of the body element to the sp ...

javascriptjquerycss

Combine two languages into a single <p>

I'm dealing with a WordPress website where I have a paragraph that contains two different languages. What I want to achieve is to display each language in a distinct font-family (font-face). For example: <p>למרות הכל its worth it</p& ...

htmlcss

The dilemma of calculating the total width of jQuery's list items

I am in the process of creating a submenu that should look like this: HTML: <ul class="mainMenu clearfix"> <li><a href="#">Eurodan huset</a></li> <li><a href="#">Hustyper</a></li> <li&g ...

jquerycss