Changing the border color of divs with a classname (ie7)

Question

How can I, using javascript, change the border color of my divs, when multiple (all) the select objects of my page are clicked on? border color should be solid red (for testing purposes).

var y = document.getElementsByTagName('SELECT');
for (var i = 0; i < y.length; i++) {
    y[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    y[i].onfocusin = function() { this.style.backgroundColor = '#E5ECF9'; }
}

html:

<div class="select-container">
    <select id="request">
        <option value="" >Please Select...</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</div>

CSS:

.select-container {
    position:relative;
    width:179px;
    height:20px;
    overflow:hidden;
    border-top: 0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 0;
}
.select-container select {
    position:relative;
    left:-2px;
    top:-2px;
    width: 181px;
}

Answer 1

Try handling the onchange for the <select> . and each time, add the new selected value to an array (if it doesn't already exists).

Each time you add new item to the array, check the length of the array and the length of the select options, if they are equal, change the border style.