What CSS Should I Use to Get a Border Around an Option Tag in Both Firefox and Ie

What CSS should I use to get a border around an option tag in both Firefox and IE?

Unfortunately, the styling of option elements is supported to different degrees by different browsers. Firefox is the only browser which allows you to add a border around options – IE and Chrome won't show a border.

Here's an overview of what styles different browsers support. The only styling you can reliably apply is background and foreground color.

Select border color

You can get rid of the border with -webkit-appearance: none;, but this removes the caret too, so you might have to add this again manually. I could not manage to find a better answer to this, since opera is really stubborn with this border. (Updated solution with caret below)

select {

  border: 0;

  outline: 0;

  background: transparent;

  border-image: none;

  outline-offset: -2px;

  border-color: transparent;

  outline-color: transparent;

  box-shadow: none;

  -webkit-appearance: none;

}

<select class="form-control" id="1">

  <option selected="selected" value="0">Most Popular</option> 

  <option value="1">A-Z</option>

  <option value="2">Z-A</option>

  <option value="3">Lowest price</option>

  <option value="4">Highest price</option>

</select>

IE8 and border css property on select menus

try putting this in your HEAD tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

as per: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

Fluid CSS layout breaks in firefox and IE11

My solution is a slightly long winded one, but it's just changing the CSS really to achieve what I think you want.

So first I've tried to use padding instead of transparent borders, and the first padding I set was on the .outer-table itself. Of course, that table is 100% width, so you'll need to add the box-sizing fix as suggested by Paul Irish:

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Then, I set a padding right on the .col-66 to create that even spacing (margin can't be used on display: table-cell).

The finally I set your background image on the .image rather than on an empty container inside that, which means no need for absolute positioning.

New CSS here:

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
    background-image: url(http://bradjasper.com/subtle-patterns-bookmarklet/patterns/concrete_wall.png);
    background-repeat: repeat repeat;
}
.outerTable {
    width: 100%;
    display: table;
    padding: 10px;
}
.outerTable > div {
    display: table-cell;
}
.col-33 {
    width: 33.333%
}
.col-66 {
    width: 66.666%;
    padding-right: 20px;
}
.content {
    padding: 3.4%;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #fff;
}
.content:last-child {
    margin-bottom: 0;
}
.image {
    background-image: url(http://lorempixel.com/500/300/abstract/4);
    background-size: cover;
    border: 10px white solid;
    background-position: 0 0;
}

And a fiddle to finish it off.

Styling a select element in Firefox

Since Firefox 35, "-moz-appearance:none" that you already wrote in your code, finally remove arrow button as desired.

It was a bug solved since that version.

Styling ` select ` in Internet Explorer

IE is most likely in quirks mode. Previous versions of IE didn't draw the select element themselves and thus it couldn't be styled properly (as well as some z-order quirks), so on IE < 8 you simply can't do it, unless you re-implement something like select in JS. Take a look at the developer tools (F12) to see which browser and document mode IE is in; if it says "Internet Explorer 8" for the Browser mode and not "Quirks mode" for the document mode, you should be ok :)

The following snippet works fine here (IE8β2):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            select {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        </form>
    </body>
</html>

What CSS Should I Use to Get a Border Around an Option Tag in Both Firefox and Ie