DEMO |
HTML<div class="background_green"> <div class="srch_L"> <div class="srch_R"> <div class="srch_BG"> <form method="get"> <div class="text"> <input type="text" onblur="javascript:if(this.value == '') { this.value = 'Введите текст';}" onfocus="javascript:if(this.value == 'Введите текст') {this.value = '';}" value="Введите текст" name="keywords" /> <input type="hidden" value="1" name="content_id" /> </div> <div class="btn"> <input type="submit" value="Найти" /> </div> <div class="clear"></div> </form> </div> </div> </div> </div> <div class="background_black"> <div class="srch_L"> <div class="srch_R"> <div class="srch_BG"> <form method="get"> <div class="text"> <input type="text" onblur="javascript:if(this.value == '') { this.value = 'Введите текст';}" onfocus="javascript:if(this.value == 'Введите текст') {this.value = '';}" value="Введите текст" name="keywords" /> <input type="hidden" value="1" name="content_id" /> </div> <div class="btn"> <input type="submit" value="Найти" /> </div> <div class="clear"></div> </form> </div> </div> </div> </div> CSS.background_green {background: #B0F589; padding: 20px;} .background_black {background: black; padding: 20px; margin-top: 2px; padding-left: 50px; padding-right: 50px;} .text input, .btn input {width:100%;} .text input { height: 21px;} .btn input {} .btn input {margin-left: 2px;} .text {float: left; width: 80%;} .btn {float: left; width: 20%;} .srch_L {background: url("images/search_L.png") no-repeat 0 0;} .srch_R { background: url("images/search_R.png") no-repeat 100% 0%; height: 57px; line-height: 57px; } .srch_BG { background: url("images/search_bg.png") repeat-x; margin-left: 10px; margin-right: 10px; padding-right: 2px;} .clear {clear: both;} IMAGES |