исправить ввод курсора - PullRequest
Новая
       31

исправить ввод курсора

0 голосов
/ 25 ноября 2011

у меня есть этот шаблон http://khine.3b1.org/search.html, а справа у меня есть поле ввода поиска.

проблема в том, что курсор находится перед фоновым изображением!

как мне сдвинуть его вправо на 25 пикселей, чтобы оно начиналось после изображения search_icon.png.'.placeholder-field', кажется, ничего не делает для меня! 

<div id="topsearch" class="yui3-u-1-8"><!-- topsearch width: 12.5% placeholder-field -->
  <table>
    <tr>
      <td>
        <a href="/;advanced_search" class="advanced-search" title="Advanced Search">Advanced Search</a>
      </td>

      <td>
        <form action=";browse_content" method="get">
          <div class="search placeholder-field">
            <input name="search_text" type="text">
            <input value="Search" class="button" type="submit">
          </div>
        </form>
      </td>
    </tr>
  </table>
</div>

вот css: 

/**************************************************************************
 * Search 
 **************************************************************************/
#topsearch {
     display: inline-block;
     margin: 3px 0 0 0;
 }

#topsearch .advanced-search {
     display: inline-block;
     float:right;
     margin:0 3px 0 0;
     width: 16px;
     height: 16px;
     text-indent: -9999px;
     background: url('/ui/core/resources/advanced_search_icon.png') 0 0 no-repeat;
     opacity: .2;
 }

#topsearch .search input {
     font-size: 100%;
     width: 90%;
     padding: 5px 2px;
     border: 1px solid #DDD;
     border-top-color: #CCC;
     border-bottom-color: #EAEAEA;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     background: url('/ui/core/resources/search_icon.png') 5px 50% no-repeat white;
 }

.placeholder-field {
    left: 25px;
}
#topsearch form input.button {
     display: none;
 }

что я пропустил?

Есть ли способ улучшить шаблон так, чтобы он был немного более плавным?

большое спасибо

Ответы [ 2 ]

0 голосов
/ 25 ноября 2011

Просто уменьшите ширину ввода и добавьте отступ слева на ваш ввод следующим образом: 

#topsearch .search input {
  padding: 5px 2px 5px 25px;
  width: 75%;
}
0 голосов
/ 25 ноября 2011

Я исправил это: 

#topsearch form input.button{
    cursor: pointer;
    height: 30px;
    position: absolute;
    right: 150px;
    width: 30px;
    display:block
}

Вы также должны удалить свойство value ввода: 

<input type="submit" class="button" value="" style="position: absolute; cursor: pointer; width: 30px; right: 150px; height: 30px;">
...