フォームの入力にフォーカスするとウェブサイトの背景が暗くなる

Question

私は大きな検索フォームと大きなウェブサイトの背景を持つウェブサイトを持っています。私は私のウェブサイトのアイディアを持っていました。それは、私が検索フォームをクリックすると、ウェブサイトの背景が薄暗くなるようにするためです。しかし、その後、私はbing.comで同じことを見た。私はcssを使ってそれをやろうとしましたが、何を試みても失敗しました。それを実現させるためのアイデア？

更新

私は私のCSSファイルで、今これを持っています。

#dim {width:100%; opacity:0; background:#000; position:absolute; height:100%;} 

私は、JSコードは、私は私のフォーム上でクリックしたとき、それはopacityが0.5に変わるようにしたいです。

以下は私のフォームのコードです。

<form name="searchform" onsubmit="return !!(validateSearch() &amp;&amp; dosearch());"> 
<input type="text" name="searchterms" class="terms" id="terms" placeholder="What are you searching for?"> 
<select name="sengines" class="state" id="state"> 
<option value="" selected>Select a State</option> 
<option value="http://kl.onehomereno.com?s=">Klang Valley</option> 
</select> 

<div class="pad10"></div> 
<input name="Search" type="submit" value="Search" class="button3"> 
</form> 

私はidとしてtermsを持っています。したがって、私は#termsと#dimで動作するjsコードが必要です。なにか提案を？

Answer 1

フォーム要素にclicksをリッスンし、例えばbackground

でclassのopacityを変更するはJavaScriptを使用することができます

EDIT：

CSS

.dim { 
background: url("home_page.PNG") no-repeat; 
background-size: cover; 
width: 100%; 
height: 500px; 
opacity: 0; 
} 

HTML

<div class="dim"></div> 
<input type="text" id="term"> 

はJavaScript

$(document).ready(function() { 
    $('#term').click(function(e) { 
     e.stopPropagation(); 
     $('.dim').css('opacity', '0.5'); 
    }); 
    $(document).on("click", function() { 
     $(this).find('.dim').css('opacity', '0'); 
    }); 
}); 

あなたはこれがどのように機能するかを取得します願っています。