#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0

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


    Hello,

    I need your help,

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

    Javascript:
    Code:
    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:
    Code:
    <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:
    Code:
    .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;
    }
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    You need to use the "onfocus" event, for the best cross browser results; "onfocusin" is an event, that is used by Internet Explorer. (see example below).
    Code:
    function setBorderChange()
    {
    var y = document.getElementsByTagName('SELECT');
    for (var i = 0; i < y.length; i++) {
        y[i].onfocus = function() { this.style.backgroundColor = '#E5ECF9';
    				this.parentNode.className = 'select-container-selected'; }
        y[i].onblur= function() { this.style.backgroundColor = '#FFFFFF'; 
    				this.parentNode.className = 'select-container'; }
    }
    }
    window.onload = function() {
    setBorderChange();
    }
    Just make sure you define a new CSS class known as "select-container-selected" and set the border-color, of that class, to red.

    Comments on this post

    • Kravvitz agrees
    Last edited by web_loone08; March 18th, 2013 at 11:18 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0
    Thanks very much for this Loon. It worked like a charm and just like it should.

    Cheers,

    Jay.

IMN logo majestic logo threadwatch logo seochat tools logo