Twitter Bootstrap Question posted in

Bootstrap selection is rendered differently in firefox and chrome – Twitter bootstrap

Bootstrap selection is rendered differently in firefox and chrome:

Firefox:
enter image description here

Chrome
enter image description here

How do the two browsers render the same way? Preferably in Chrome the way.

My question is diferent from thid question
: Twitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox

because the problem is not width or height, the problem is the triangle (in the right side) in select field, the way than the browser rendering this triangle is completely different, the answer of below question is not apply in the this case.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If useful for someone, the code that solved my problem was this:

        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 did this code based in the example/link passed by Rachel S in thew answer above, the link is : http://codepen.io/ruchiccio/pen/zqbaKN


  2. 0

    They won’t render the same way. Every browser looks different, with Explorer being the wordst!

    I was just working on this today! You can have a background div that includes a border and a background image of an upside down triangle on the right side. Then have a span above the div with the first selection (in your case “1”). Then put the select menu on top of the div/span with absolute positioning and a zero opacity. This makes the browser defaults of the select menu not show at all.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search