Personalizing the form controls in Bootstrap for selection options

Utilizing Bootstrap's form-control class helps maintain a consistent style for both form input and select option elements. However, when using form-control on select elements, it results in an unsightly drop-down button appearance in Firefox.https://i.sstatic.net/tPMuJ.png

The desired outcome is illustrated here:

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

Unfortunately, upon inspecting the CSS code, I am unable to pinpoint the specific section that needs to be overridden since there isn't a designated CSS rule governing the drop-down arrow's styling.

This snippet depicts the current implementation:

<div class="form-group row">
    <label for="industry" class="">Industry :</label>
    <select name="industry" class="form-control">
        <option value="" disabled selected>Select Industry</option>
        <option value="financial-service">Financial Services</option>
        <option value="healthcare-lifescience">Healthcare & Life Science</option>
        <option value="communications">Communications</option>
    </select>
</div>
cssbootstrap-4html-inputform-control

Answer №1

If you want to enhance the selection experience on your website, you can integrate Chosen, which is a jQuery plugin specifically designed for select elements. It offers a wide range of features and allows for easy customization.

To implement Chosen in your project, you can refer to the following link: Chosen Plugin

Below is an example of how you can include Chosen in your code:

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"
  />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <div class="form-group">
    <label for="industry" class="">Industry :</label>
    <select name="industry" id="industry" class="form-control chosen-select">
      <option value="" disabled selected>Select Industry</option>
      <option value="financial-service">Financial Services</option>
      <option value="healthcare-lifescience">Healthcare & Life Science</option>
      <option value="communications">Communications</option>
    </select>
  </div>
  <script>
    $("#industry").chosen();
  </script>

Answer №2

Check out the custom-select class in bootstrap for an easy way to customize the style of select elements.

Keep in mind that the ability to style select/options is somewhat restricted. For complete control, consider using a third-party package to transform the select into a customized html/javascript based select.

Answer №3

If you want to customize the appearance of inputs, selects, and dropdowns in browsers like Chrome and Firefox, take a look at the -moz-appearance property. You can learn more about it here and use it by setting it to none.

By using -moz-appearance: none, you can override the default browser styles and apply your own custom styling through pseudo elements. This is particularly useful when working with frameworks like Bootstrap that already have their own styling in place.

Answer №4

My Pen is verified to work flawlessly on chrome, firefox, edge and safari

view this codepen 

select.customDropdown::-ms-expand {
    display: none;
}

select.customDropdown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';

    background : url("https://img.icons8.com/material/24/000000/sort-down.png") no-repeat right #fff;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="jumbotron container">
  <div class="row">
  <div class="col-md-6 offset-md-3">
<div class="form-group row">
    <label for="industry" class="">Industry :</label>
    <select name="industry" class="form-control customDropdown">
        <option value="" disabled selected>Select Industry</option>
        <option value="financial-service">Financial Services</option>
        <option value="healthcare-lifescience">Healthcare & Life Science</option>
        <option value="communications">Communications</option>
    </select>
</div>
  </div>
  </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.js"></script>

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

The challenge of navigating CSS specificity guidelines

In my CSS file, I have defined two styles for a table with the class "myTable". The first style sets the background color of header cells to gray, while the second style sets the background color of odd rows to blue: .myTable th { background-color: gr ...

css

implementing dynamic navigation bar, when transforming into a dropdown menu using ReactJS

I am currently utilizing a navigation bar from a Bootstrap theme within my React project. The navigation bar includes an in-built media query that determines whether it should display as a dropdown menu or not, with a toggler to handle the dropdown functi ...

javascripthtmlcssreactjs

What causes the accordion class to activate panels with varying names?

Why are some of my accordions triggering other accordions when they have different names? I've been working on resolving the issue where opening the second accordion in the second, third, or fourth panel closes the second accordion in the first panel ...

javascripthtmlcsstwitter-bootstrap-3

Achieving Vertical Center Alignment in CSS

I'm having trouble understanding what's happening here: My goal is to vertically center an iframe and another div, both positioned alongside each other horizontally. What I've attempted is placing the iframe and div inside a new div called ...

htmlcsscss-tables

The margin-left attribute in HTML does not seem to be functioning properly

When I am working on a .php file, I dynamically generate HTML content (like a template) for each result returned from the search input: while ($row = mysqli_fetch_array($result)) { //image echo "<img id=" . '"' . "myImg" . '"' ...

phphtmlcss

Menu elements should display a responsive behavior where on mobile devices, only the icon is shown instead of the word "menu"

Due to the length of our company logo, we need a way to hide certain letters in the Menu and Basket sections, while still displaying the icons. Wrapping the names in span tags and using visibility:hidden; works but leaves empty space visible on the right s ...

htmlcss

When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

This is a discussion on creating a responsive image gallery website with images of different sizes and no margins or paddings. The issue at hand is that the .showcase class hides at a specific @media breakpoint when resizing, but there is a desire to displ ...

htmlcssresponsive-design

Struggling to grasp the advanced concepts of the Bootstrap 4 grid system

Creating a more complex bootstrap grid has proven challenging for me. Despite multiple attempts, I have yet to achieve the layout I require. Attached is a visual representation of the specific box arrangement I am aiming for, each color denoting a differen ...

bootstrap-4

Customizing the date-select widths: A step-by-step guide

I've been struggling with adjusting the width of different instances of this line: <%= f.date_select :deadline, :order => [:month, :day, :year], class: 'date-pick', id: 'goal' %> Despite creating unique ids for select, d ...

htmlcssdate

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

Animating a div's width with CSS from left to right

My goal is to create an animation effect for two overlapping divs that will reveal or hide the text inside them. I want one div to animate from left to right while the other animates from right to left, creating a wiping effect where as one piece of text d ...

cssanimation

Updating previous values in reactjs to a new state

I have a div set up to render multiple times based on data retrieved from the database. The background color of the div corresponds to the ID received from the backend. My goal is to change the background color of the currently selected div and remove the ...

javascripthtmlcssreactjs

Initiating CSS3 animations when the display changes

In an attempt to incorporate CSS3 animations for fading elements in during page load, I am faced with the challenge of setting the element to display: none; and then back to display: block;. My goal is to exclusively apply the CSS3 animation upon the init ...

cssanimationcss-transitions

Internet Explorer reverts back to default fonts once the webpage has completed loading

I'm encountering a minor problem with a website I'm currently working on. My CSS and web fonts are from Fonts.com, and everything seems fine except in Internet Explorer. Initially, the page displays with the fonts correctly applied, but once the ...

cssinternet-explorerwebfonts

Managing a fixed footer in an Android webview to prevent it from obstructing an input field when the soft keyboard appears

I am working with a webview that contains a React app, not React Native. The webview features a login page with two input fields and a fixed footer. However, when one of the input fields is focused, the footer moves up and covers part of the input field, ...

androidhtmlcssreactjswebview

"Is there a way to reverse the action of $( "button" ).remove()

Currently, I have implemented JQuery's $( ".button" ).remove(); function to get rid of all the buttons on my webpage immediately after a user clicks the print PDF button that changes the HTML page into a PDF. Nevertheless, once this process is done ...

javascriptjquerycsshtml

A guide to entering information into an input field with JavaScript for logging in successfully

https://i.stack.imgur.com/TF51Z.gif https://i.stack.imgur.com/HHsax.png https://i.stack.imgur.com/HUztt.png When attempting to input text using document.getelement('').value="" , it doesn't behave as expected. The text disappear ...

javascripthtmljquerycssajax

Modifying CSS style according to the contents of an HTML element

Creating a room allocation page with multiple panel boxes using Bootstrap. Each box represents a bed - highlighted in red if occupied and green if vacant. Clicking on a green panel redirects to the room allocation page, while clicking on a red panel goes t ...

javascriptjqueryhtmlcsstwitter-bootstrap

The sticky navbar fails to stay in place when the content becomes too lengthy

This is my current state of code (minified, for explanation only) index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w ...

htmlcssreactjstypescriptnext.js

Adjusting webpage background with JavaScript

I've been struggling with this for the past six hours and can't seem to get it right. I've checked out various solutions on Stack Overflow, but nothing seems to work. What am I missing here?!? My html5 page doesn't have a background an ...

javascriptjqueryhtmlcss