Как поиску добавить кнопку с лупой?
<div class="search">
<form action="search-handler.php" method="post">
<input id="o_keywords" type="text" size="40" name="search">
<input name="submit" type="submit">
</form>
</div>input[type=submit] {
width: 30px;
height: 30px;
background: url("img/лупа.jpg") center center;
}<script type="text/javascript">
function show(state){
document.getElementById('field').style.display = state;
document.getElementById('window').style.display = state;
}
</script>
<style>
body {
margin: 0;
background-color: #acacac;
padding: 20px;
}
body a {
font-size: 12px;
}
#field {
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
}
#window {
width: 350px;
height: 200px;
display: none;
background-color: #ffffff;
text-align: center;
padding: 30px;
position: relative;
top: 50%;
left: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#window a {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<body>
<a onclick="show('block');" href="#">Показать</a>
<!-- это невидимое поле, по клику скрывает field и window -->
<div onclick="show('none');" id="field"></div>
<!-- это ваше всплывающее окно — window -->
<div id="window">
<p>Привет, я здесь!</p>
<a onclick="show('none');" href="#">Закрыть</a>
</div>
</body>