Browser inconsistencies result in varying appearance of Bootstrap selection in Firefox and Chrome

Issue with Bootstrap select rendering in Firefox and Chrome:

Firefox: https://i.sstatic.net/HWEcR.png

Chrome: https://i.sstatic.net/GBuDP.png

Looking for ways to make the two browsers render consistently, preferably in Chrome's style.

This question is distinct from the one found here: Twitter Bootstrap: Getting Form Inputs and Buttons to be same height in Chrome and Firefox

The issue at hand is not related to width or height, but rather the inconsistency in rendering the triangle (on the right side) in the select field. The way each browser handles this triangle rendering differs significantly, therefore the solution provided in the linked question may not be applicable in this case.

csstwitter-bootstrapgoogle-chromefirefox

Answer №1

The way in which they are displayed differs across browsers. Each browser has its own unique rendering, with Internet Explorer typically yielding subpar results!

I actually tackled this issue today! One solution is to create a background div with a border and an image of an upside-down triangle on the right side. Then, place a span above the div containing the initial selection (in this case, "1"). Finally, position the select menu absolutely on top of the div/span with zero opacity to hide the default browser styling completely.

Check out a working example here: http://codepen.io/ruchiccio/pen/zqbaKN 

<div class="selector">
     <span>Show 24</span>
      <select class="form-control">
        <option value="">Show 24</option>
        <option value="">Show 48</option>
        <option value="" selected>Show 96</option>
        <option value="">View all</option>
      </select>
    </div>

Answer №2

In case it helps someone, the solution code that worked for me is as follows:

    select.custom {
                        background-image: url("https://lh3.googleusercontent.com/-UO0rQxRXKW0/VzN-mqXyiUI/AAAAAAAAPgM/XQibxHl_LcI57GDUV49IUQUYf6_OUvkngCCo/s166/Untitled-1.gif");
                        -moz-appearance: none;
                        padding-right: 25px;
                        background-repeat: no-repeat;
                        background-position: right center;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                    }
<select class="form-control custom">
  <option>1</option>
  <option>2</option>  
</select>

I crafted this code with reference to the example/link shared by Rachel S in the previous answer. The link provided was : http://codepen.io/ruchiccio/pen/zqbaKN

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

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

javascriptjqueryhtmlcss

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

jquerycssjquery-ui

The table is overflowing its parent element by exceeding 100% width. How can this issue be resolved using only CSS?

My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width. While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% d ...

htmlcsshtml-table

Optimizing Chrome's Precious Load Time

Encountering issues with Chrome browser auto-filling passwords, usernames, etc. Creating a problem where input field validation for emptiness is not possible in Chrome while it functions correctly in other browsers. $(document).ready(function() { ...

javascriptjquerygoogle-chrome

The datepicker in Angular Material refuses to open when used within a modal dialog box

I successfully integrated an angular material 2 date-picker into a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h ...

htmlcsstwitter-bootstrapangularangular-material2

Issue with box-sizing border-box not applying to top and bottom borders

Currently, I am in the process of developing my own responsive website. However, I have encountered an issue with the box-sizing border-box on the top and bottom borders of one specific image. The layout consists of two columns with images of varying heigh ...

cssborder-boxbox-sizing

The striped color override feature in Bootstrap appears to be malfunctioning in Internet Explorer 8

I have come across several discussions regarding this topic with various suggestions. My current objective is to make the alternating rows in Bootstrap (2.3.2) appear darker in Internet Explorer 8. To achieve this, I attempted to override the style by impl ...

cssinternet-explorertwitter-bootstrap

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

javascripthtmlcss

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

csshtmlvue.jssass

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

phpcsswordpresswoocommerce

Retrieve data from HTML in order to apply styling to an element

I am attempting to set the width of my .bar-1 outer span element based on the value of my inner span element. <span class="bar bar-1"> <span name="PERCENTAGE" id="PERCENTAGE" disabled="" title="Total Percentage" maxlength="255" value="66" tabinde ...

htmlcss

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

MUI: tips for positioning text next to each other on a page

I need assistance aligning numbers and text side by side, similar to the image shown here: https://i.sstatic.net/gXzOM.jpg However, there is a margin to the right of the text(MASTER I 406), causing the numbers to not be in the correct position. Currently, ...

cssreactjsmaterial-ui

Tips for creating text that adjusts to the size of a div element

I'm currently working on developing my e-commerce website. Each product is showcased in its own separate div, but I've encountered a challenge. The issue arises when the product description exceeds the limits of the div, causing it to overflow ou ...

javascripthtmlcssresponsive

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

I'm having trouble achieving a 2 x 2 grid that is centered on my screen. The code snippet below shows what I have so far in the HTML file. Just to provide some context, this project is meant for a native mobile application. <ion-header> <i ...

htmlcssangularionic-frameworkstyling

Position the DIVs at the bottom of the TD

I'm having trouble aligning two DIVs within a table TD to the bottom of the table. Despite trying various alignment methods, the left DIV simply won't move. It's crucial for me to design this email responsively, ensuring it still displays co ...

htmlcssvertical-alignment

What is the method for generating an oval shape with a border-radius in CSS?

Is there a way to create an oval shape instead of a rectangle with rounded edges using CSS? Below is the code snippet I have been working with: div { position: fixed; border-radius: 25px; background: rgba(0,0,0,.5) width: 100px; height: 50px; ...

css

How can you make the browser window scroll horizontally when a div is clicked using jQuery?

I have an image of an arrow inside a div. The div is positioned fixed in the bottom right corner of an extremely wide page. Is there a way to utilize jQuery to scroll the window 600px to the right each time the arrow is clicked? Also, can I detect when th ...

javascriptjqueryhtmlcssscroll

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

What is the latest CSS browser support for the min() and max() functions in 2018?

I am considering implementing the use of the min() and max() functions in my project. I'm curious about the current browser support as of 2018. Do you think it is necessary to include the @supports at-rule? For example, I could write: .px-4-safe { ...

css