Question

使用jQuery，

当用户点击下拉列表或将光标放在输入框中时，如何更改输入框和选择框的背景？

<!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>

Answer 1

请看小提琴。

http://jsfiddle.net/jyr8r/

还为样式添加了一个新类。

$(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'); 
    });
});

Answer 2

您可以将事件附加到元素并运行更改背景的函数。 JSFiddle

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

如果您需要在用户点击输入框时触发，则应将hover更改为focus。如果您需要在选择时更改触发器，则当用户选择新选项时，您应该将click更改为change

Answer 3

首先，您需要导入jQuery库：

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

接下来，您将要为输入和select元素分配一个CSS类：

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

最后，为具有该背景的每个元素调用jQuery css（propertyName，value）函数的所有元素定义一个click函数。

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

以下是完整的来源：

<!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>

更改自定义组合输入选择框的背景颜色

3 个答案: