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

Я хочу создать текстовое поле, в котором есть кнопка внутри него, как я вижу на некоторых сайтах, обычно есть текстовое поле, а в правом углу - кнопка с изображением ручной линзы и когда кнопка нажата на форму. Я попытался использовать divs для создания чего-то подобного, но я, похоже, не получил его. Как это делается с помощью css или есть какая-то магия jquery?

Ответ 1

Использование обертки

Техника, о которой вы говорите, фактически не имеет кнопки внутри текстового поля, граница и фон кнопки и текстового поля просто смешиваются с оберткой div. Вот пример:

jsFiddle

HTML

<div class="wrapper">
    <input type="text" />
    <button>GO</button>
</div>

CSS

.wrapper {
    border:1px solid #000;
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

Используя `position:absolute`

Альтернативный метод состоит в том, чтобы поместить кнопку абсолютно и прикрепить ее вправо. Преимущество этого в том, что вы можете более легко реализовать фокус/активную границу вокруг текстового поля. Вы можете обойти текст под кнопкой, указав padding-right в текстовое поле.

jsFiddle

.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
    position:absolute;
    right:0;
    top:0;
}

input {
    padding-right:30px; /* button padding */
}

Ответ 2

Это не обязательно, как вам лучше всего это сделать. Однако вот что вы просили. Проверьте этот jsFiddle. Сделать положение кнопки: абсолютным;

http://jsfiddle.net/j8bbj/

<input type="text" />
<button>si</button>



input[type="text"]
{
    width:200px;
    height:40px;
}

button
{
    position:absolute;
    left:165px;
    top:10px;    
}

Ответ 3

Вы можете поместить <button> внутри текстового поля, но это не выглядит красивым. Поле поиска будет расположено рядом с текстовым полем, которое, по вашему мнению, находится внутри текстового поля. Я использовал этот HTML-код:

<input type="search">
<input type="button" value="Search" id="mySearch">

И CSS:

#mySearch {
margin-left: -4px; // I put margin-left -4px because the left border of the button will be in contact with the search box right border. This will make it look like the button is right inside the input field but it not.
border-width: 1px; // border-width: 1px; because the input default border-width is 1px.
background-color: white; //White because the input default background-color is white.
border-color: black; //Black because the input default border-color is black.

Как вы можете заметить, граница кнопки поиска, background-color, border-width должна соответствовать настройкам поля поиска по умолчанию.

Вот пример JSFiddle.

Ответ 4

Простой код CSS позволяет:

<!DOCTYPE html>
<html>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="#" onclick="location.href='http://www.w3schools.com/lib/w3.css'; return false;">

<body>
<br>
<div class="w3-container" style="position:relative">
  <form action="yoursearch.php" method="post" enctype="multipart/form-data">
  <input type="text" class='w3-input w3-border' name='sendmsg' id='sendmsg'  required placeholder="type search here">
  <button  class="w3-btn w3-blue w3-border  w3-round-xlarge " style="position:absolute;top:2px;right:16px;" >Go</button>
  </form>
</div>

</body>
</html>