Jump to content
  • 0

Кнопка поиска


Dayks
 Share

Question

Здравствуйте.

Мне необходимо чтобы поиск производился по нажатию на кнопку в виде картинки + чтоб при наведении на эту картинку курсора она менялась на другую.

Чтоб заменить кнопку "Искать" на картинку я в html прописал код:


<input type="image" src="wp-content/themes/MyTheme/images/search.png" name="submit" class="searchbutton" />

C помощью css знаю только как изменить фон класса searchbutton при наведении (псевдокласс hover), но при такой реализации он размещен под картинкой, прописанной в html, то есть то, что она меняется не видно.

Так как сделать чтоб заменялась?

Спасибо за ответ.

P.S. Сайт размещен на локале.

Edited by Dayks
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Либо берёшь кнопку типо submit, убираешь ей стандартные стили, по умолчанию фоном вешаешь первую картинку. При наведении заменяешь на другую. Либо твой пример и через скрипт.

Link to comment
Share on other sites

  • 0

Если у кнопки типа submit убрать свойство value, то появляется надпись "Отправить". Я так понял это стандартное значение свойства value. Ну а заполнять его так же не вариант, так как текст идет поверх кнопки поиска. А как сделать чтоб надпись не отображалась вообще не пойму.

Link to comment
Share on other sites

  • 0

Если у кнопки типа submit убрать свойство value, то появляется надпись "Отправить". Я так понял это стандартное значение свойства value. Ну а заполнять его так же не вариант, так как текст идет поверх кнопки поиска. А как сделать чтоб надпись не отображалась вообще не пойму.

value=""

Link to comment
Share on other sites

  • 0

Рано радоваться начал... при использовании input все красиво - строка ввода поискового запроса идет строго на одном уровне с кнопкой поиска, но как только заменяю на <button></button> сразу же все летит к чертям - в опере поле ввода смещается ниже кнопки, в хроме и ФФ выше (в ФФ больше вверх чем в хроме), в ИЕ тоже ниже. Вобщем поправить ситуацию позиционированием невозможно. Ребят, помогите наконец-таки решить проблемку...

вот куски кода если что:

html


<div id="searchback">
<div id="searchbar">
<form method="get" action="<?php bloginfo('url'); ?>/" class="searchform" style="float: right;">
<fieldset>
<input type="text" value="<?php the_search_query(); ?>" name="s" class="searchterm" />
<input type="submit" value="Искать!" class="searchbutton" />
</fieldset>
</form>
</div>
</div>

css


#searchback {
border-bottom-right-radius: 7px;
-moz-border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-left-radius: 7px;
float:right;
width:310px;
height:40px;
background-color:#5b5b5b;
}

#searchbar {
margin-top:5px;
height:30px;
float: right;
margin-right:24px;
display: inline;
font-size: 0.7em;
border:1px solid red;
}

.searchform {
display: inline;
vertical-align: middle;
}

.searchform fieldset {
display: inline;
vertical-align: middle;
}

.searchform label {
display: inline;
vertical-align: middle;
}

.searchform input {
display: inline;
vertical-align: middle;
}

.searchform .searchterm {
width: 200px;
padding: 3px;
color: #999;
background: #fff;
border: 1px solid #ccc;
}

.searchform .searchterm:focus {
background: #fffff9;
}

.searchbutton {
background:url(images/search.png) no-repeat;
cursor: pointer;
font-size: 0.9em;
height: 30px;
width: 30px;
}

.searchform .searchbutton:hover {
background: url(images/search_focus.png) no-repeat;
}

при этом коде я вижу следущее

1895433.jpg

черный блок - это searchback, внутри красной рамки searchbar, кнопку вы и сами видите

Edited by Dayks
Link to comment
Share on other sites

  • 0

Как вариант — подложить под <input type="image"> фон-подложку с состоянием при наведении, а сам input по :hover делать полностью прозрачным :). Но, имхо, это крайний выход "от бедности"...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy