Select box does not have border

Question

The following css file works fine in providing the background colour and border to a textfield but does not provide the border to the select box.

.fieldSClsErr {
    font: normal 0.75em Arial, Helvetica, sans-serif;
    padding: 0 1px 0 0; 
    color:black;
    line-height:120%;
    width:200px;
    height:18px;
    border:1px solid #b3b3b3;
    border-color: red red red red;
    background-color:#fffff0;
    vertical-align: middle; 
    margin:0px;
}

Question

How can I modify this css code so that I get a border around a select box?

Answer 1

Try this http://jsfiddle.net/thiswolf/2Wyyj/

<select class="fieldSClsErr" style="width: 80%;">
    <option value="Sal">Sal</option>
    <option value="Awesome">Awesome!</option>
  </select>

  <input class="fieldSClsErr" type="text" />

css

.fieldSClsErr{
display:inline-block;
    font: normal 0.75em Arial, Helvetica, sans-serif;
    padding: 0 1px 0 0; 
    color:black;
    line-height:120%;
    width:200px;
    height:18px;
    border: 2px solid red !important;
    background-color:#fffff0;
    vertical-align: middle; 
    margin:0px;
    margin-bottom:10px !important;
}

Answer 2

Your border syntax is wrong :

- border:1px solid #b3b3b3;
- border-color: red red red red;

+ border: red 1px solid;