更改自定義組合輸入選擇框

我怎樣才能改變我的輸入框和選擇框兩者的背景下，當用戶無論是在降點擊關閉或把他們的光標輸入框？

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

來源

2014-02-25 Jason Kelly

請參閱小提琴。

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

來源

2014-02-25 20:57:25

您可以將事件附加到您的元素並運行更改背景的函數。 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

來源

2014-02-25 20:54:45

首先，你要導入的jQuery庫：

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

接下來，你要一個CSS類分配給輸入和選擇元素：

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

最後，爲所有這些元素定義一個點擊函數，這些元素在具有該背景的每個元素上調用jQuery css（propertyName，value）函數。

$(".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>

來源

2014-02-25 21:07:46 Jeff

更改自定義組合輸入選擇框

回答

相關問題