CODEWITHSUNDEEP
javascriptjquerydom
Jason Kelly
Jason Kelly

Reputation: 2655

Changing the background color of a custom combination input-select box

Using jQuery,

How can I change the background of both my input box and select box when a user either clicks on the drop down or puts their cursor in the input box?

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
#refdocs_select { 
    left: expression(this.previousSibling.offsetLeft); 
    width: expression(this.previousSibling.offsetWidth);  
    clip: expression("rect(2px auto 20px " + (this.previousSibling.offsetWidth - 20) + "px)"); 
    overflow: hidden;
    position: absolute;
    top: -1px;
    font-size: 9pt;
    font-family: Arial;
}
#refdocs_wrapper {
    border: 1px solid rgb(128,128,128);
    display: block;
    position: relative;
    width: 179px;
    height: 20px;
}
#refdocs_input {
    border: 0;
    height: auto;
    width: 174px;
    position: relative;
    font-size: 9pt;
    font-family: Arial;
    padding: 2px;
}
</style>

<script type="text/javascript">

</script>

</head>

<body>

    <div id="refdocs_wrapper">
        <input id="refdocs_input" type="text" ><select id="refdocs_select"></select>
    </div>
</body>

</html>

Upvotes: 0

Views: 128

Answers (3)

Jeff
Jeff

Reputation: 396

First, you'll want to import the jQuery library:

<script src='jquery.min.js'></script>

Next, you'll want to assign a CSS class to both the input and the select element: 

<input id="refdocs_input" class="bg-change" type="text" ><select id="refdocs_select" class="bg-change"></select>

Finally, define a click function for all of those elements that calls the jQuery css(propertyName, value) function on each element with that background.

    $(".bg-change").click(function(){
        $(".bg-change").css("background-color","yellow");
    });

Here's the complete source:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
<style type="text/css">
#refdocs_select { 
    left: expression(this.previousSibling.offsetLeft); 
    width: expression(this.previousSibling.offsetWidth);  
    clip: expression("rect(2px auto 20px " + (this.previousSibling.offsetWidth - 20) + "px)"); 
    overflow: hidden;
    position: absolute;
    top: -1px;
    font-size: 9pt;
    font-family: Arial;
}
#refdocs_wrapper {
    border: 1px solid rgb(128,128,128);
    display: block;
    position: relative;
    width: 179px;
    height: 20px;
}
#refdocs_input {
    border: 0;
    height: auto;
    width: 174px;
    position: relative;
    font-size: 9pt;
    font-family: Arial;
    padding: 2px;
}
</style>
<script src='jquery.min.js'></script>

</head>

<body>

    <div id="refdocs_wrapper">
        <input id="refdocs_input" class="bg-change" type="text" ><select id="refdocs_select" class="bg-change"></select>
    </div>

    <script type="text/javascript">

    $(".bg-change").click(function(){
        $(".bg-change").css("background-color","yellow");
    });
    </script>

</body>
</html>

Upvotes: 0

Ananthan Unni
Ananthan Unni

Reputation: 1304

Please see the fiddle.

http://jsfiddle.net/jyr8r/

A new class is also added for style.

$(function(){
    $('input#refdocs_input,select#refdocs_select').focus(function(){
       $('input#refdocs_input,select#refdocs_select').addClass('inFocus'); 
    })
    .blur(function(){
        $('input#refdocs_input,select#refdocs_select').removeClass('inFocus'); 
    });
});

Upvotes: 2

Volkan Ulukut
Volkan Ulukut

Reputation: 4218

you can attach events to your elements and run a function that changes the backgrounds. JSFiddle

function changeBG()
{
    $("#refdocs_input").css("background-color","#FF0000");
    $("#refdocs_select").css("background-color","#FF0000");
}
$("#refdocs_input").hover(changeBG);
$("#refdocs_select").click(changeBG);

if you need to trigger when the user clicks the input box you should change hover to focus. and if you need to change the trigger on select, to when the user selects a new option, you should change click to change

Upvotes: 0

Related Questions