Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    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;
    }
    Last edited by jason_kelly; 03-18-2013 at 11:39 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, one way:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/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-red {
        position:relative;
        width:179px;
        height:20px;
        overflow:hidden;
        border-top: 0;
        border-right: 5px solid red;
        border-bottom: 5px solid red;
        border-left: 0;
    }
    
    .select-container select {
        position:relative;
        left:-2px;
        top:-2px;
        width: 181px;
    }
    </style>
    </head>
    <body>
    <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>
    <script type="text/javascript">
    var y = document.getElementsByTagName('SELECT');
    for (var i = 0; i < y.length; i++) {
        y[i].onblur = 
            function() 
            {
                this.style.backgroundColor = '#FFFFFF'; 
                this.parentNode.className = "select-container";
            }
                
        y[i].onfocus = 
            function()
            { 
                this.style.backgroundColor = '#E5ECF9'; 
                this.parentNode.className = "select-container-red";
            }
    }
    </script>
    </body>
    </html>
    And the event is onfocus. Not onfocusin.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    To avoid repeating the common styles

    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-container-red {
        border-right: 5px solid red;
        border-bottom: 5px solid red;
    }
    Code:
    <script type="text/javascript">
    var y = document.getElementsByTagName('SELECT');
    for (var i = 0; i < y.length; i++) {
        y[i].onblur = 
            function() 
            {
                this.style.backgroundColor = '#FFFFFF'; 
                this.parentNode.className = this.parentNode.className.replace("select-container-red", "");
            }
                
        y[i].onfocus = 
            function()
            { 
                this.style.backgroundColor = '#E5ECF9'; 
                this.parentNode.className += " select-container-red";
            }
    }
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •