Текстовое поле с кнопками

Question

Я пытаюсь создать поле ввода с двумя кнопками слева и справа. Вот чудовище Франкенштейна, которое у меня есть: http://vegan.fm/clone/?p=8679

Это должно выглядеть как текстовое поле + кнопка здесь: http://appsumo.com/welcome/?next=/

Мне удалось настроить его, но это, похоже, просто перемешалось на другой ОС или компьютере.

Я сделал это, одержимо изменяя значения отступов и полей, но моя интуиция говорит мне, что есть лучшая практика. До сих пор я не нашел ничего с поиском Google / StackOverflow. Любая помощь приветствуется. Спасибо.

Обновление : Проблема, с которой я столкнулся, заключается в том, что значение "высота" для кнопки и поля ввода в точности совпадают, однако кнопка всегда выше, чем поле ввода.

Вот код:

    .halfbutton {
   border-top: 1px solid #f0d995;
   background: #806a43;
   padding: 0px 3px 0px 3px;
   background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43));
   background: -moz-linear-gradient(top, #d1ad51, #806a43);
   height: 30px;
   width:25px;
   -webkit-border-radius: 8px 0 0 8px;
   -moz-border-radius: 8px 0 0 8px;
   border-radius: 8px 0 0 8px;

   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }

А для поля ввода:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

    <input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... /> 
</form>

Answer 1

Не знаю, правильно ли я понял вопрос.
Чтобы это выглядело так, как в вашей ссылке, вы должны использовать background img в форме ввода;
Вы можете сделать так, чтобы это выглядело как встроенная форма ввода с помощью css3
в css

#inputform{
    background-color: #f7f7f7;
    -moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
    -webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
    box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
    ...
}

В комментариях есть ссылка с вашим кодом с сайта;

Answer 2

На данный момент выравнивание мне кажется нормальным (в Chrome), но на входе нет границы, поэтому трудно сказать, что происходит.

Мой комментарий, хотя - прямо сейчас у вас есть опции поиска add'l в виде выпадающего меню слева от поля ввода, затем выпадающий список «more» с опциями add'l, прикрепленными справа от ввода. Я бы сказал, что это не соответствует типовой модели пользовательских окон поиска, где непосредственно справа от ввода находится кнопка отправки / настройки. Возможно, переместите кнопку параметров вправо, а затем добавьте «еще» в виде отдельной кнопки справа от этого (или ниже).

Просто мысль.