Кнопка внутри поля поиска - как создать с помощью CSS

Интересный вопрос создания поля поиска с кнопкой внутри.

Сейчас такой прием очень популярен в дизайне и используется повсеместно на сайтах. Почему популярен - просто очень красив такой способ передачи поля ввода в веб-приложении. Чтобы было более понятно, о чем идет речь, давайте посмотрим пример макета с подобной формой поиска:

Дизайн нарисован таким образом, что видим следующее. Поле ввода текста с текстом-заглушкой

1	placeholder

, справа внутри поля находиться кнопка отправки запроса в виде текста “Send”.

Все вроде так и в чем же проблема? Трудность заключается в том, что на сегодняшний день возможности CSS не позволяют поместить кнопку внутри элемента

input

. Поэтому в данном случае выход один - разместить рядом два элемента:

1
input

и кнопку (

1
button type="submit"

или

1
input type="submit"

Оба эти элемента обернуть в родительский элемент

form

(благо он является блочным) которому придать внешние свойства поля ввода - фоновую заливку, границу, внутренние отступы

1
padding

. А у настоящих элементов

1
input

или

1
button

убрать все визуальные признаки их присутствия внутри

1
form

На авторитетном для меня сайте htmlbook есть статья, посвященная подобному вопросу. Но в ней описывается способ, когда внутрь элемента форм вставляется дополнительный блок

div

. Которому назначаются все внешние атрибуты поля ввода.

Мне такой подход не совсем понятен - зачем плодить лишнюю разметку, когда с подобной задачей прекрасно справляется сам элемент

form

Мне более нравиться способ, представленный на сайте Speckyboy.com автором Catalin Rosu, в котором как раз и используются только три элемента:

form

1
input type="text"

1
button type="submit"

. В самом конце статьи я приведу код этого примера также, ибо он мне понравился.

Приступаем к первому примеру и начнем создавать поле поиска с кнопкой, как на картинке. Для начала придадим элементу

form

внешние признаки поля ввода: зададим границу с радиусом скругления, фоновую заливку и внутренние поля отступа

1
padding

Помимо этого, явно установим ширину и высоту нашего будущего “поля” ввода и немного приукрасим ее, анимировав цвет границы при наведении

hover

form{
  border: 1px solid #ad9d80;
  padding: 4px 20px 4px 24px;
  width: 254px;
  margin: 0 0 25px 0;
  height: 30px;
  background-color: #e4d9c5;
  border-radius: 9px;
  
  &:hover{
    border-color: darken(#ad9d80, 10%);
  }

Теперь уберем все, что делает

input

таковым в нашем случае - обнулим границу, переопределим

1
padding

и установим в ноль

1
margin

Это основные свойства элемента

input

, назначаемые ему по умолчанию браузером. Затем немного поборемся с браузерами на WebKit (Chrome\Safari), которые создаются эффект свечения вокруг поля ввода при получении фокуса

1
outline

и рисуют тонкую линию-границу

1
-webkit-appearance: none

несмотря на то, что мы убрали ее, обнулив

1
border

Фоновый цвет сделаем одинаковым с элементом

form

, чтобы создавалась иллюзия однородности. Все остальные свойства можно не упоминать - они очевидны (кегль, цвет текста, высота

1
input

и так далее).

Практически также поступим для элемента

button

, за исключением характерных нюансов типа

1
text-transform: uppercase

или

1
color: #4f432e

Кстати, у Catalin Rosu я перенял “фишку”, когда он применяет

1	button type="submit"

вместо

1
input type="submit"

. Это делается для дополнительной функциональности кнопки, так как

1
button

может перехватывать событие Enter (нажатие этой клавиши на клавиатуре) + событие мыши. А вот

1
input type="submit"

- только нажатие мыши на самом себе:

input[type="text"]{
  border: none;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  height: 30px;
  vertical-align: top;
  background-color: #e4d9c5;
  color: #beb19a;
  font-size: 18px;
  font-style: italic;
  padding: 0 8px 0 0;
  width: 192px;
}

button[type="submit"]{
  border: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 30px;
  color: #4f432e;
  background-color: #e4d9c5;
  cursor: pointer;
  transition: color .2s;
  
  &:hover{
    color: lighten(#4f432e, 10%);
  }

Ну и в конце приукрасим текст-заглушку

1	placeholder

. Здесь придется использовать браузерные префиксы, так как данное свойство не поддерживается в полной мере браузерами на сегодня:

input::-webkit-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}
input:-moz-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}
input:-ms-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}

Совсем забыл привести HTML-код, на основе которого создавались все вышеприведенные стили:

<form action="#" method="#">
  <input type="text" name="email" id="email" placeholder="enter your email address...">
  <button type="submit">send</button>
</form>

Результат создания поля поиска показан ниже:

Все хорошо.

Поле ввода и кнопка со стрелкой (псевдо-элемент) внутри.

На закуску привожу полный код (почти без объяснений - чего там объяснять) от Catalin Rosu, как и обещал.

Здесь есть интересный атрибут

required

, который делает значение в поле ввода обязательным. Если оно будет пустым и нажать кнопку отправки, то появиться сообщение о необходимости сначала ввести данные.

Также автором статьи намеренно используется элемент

1	input type="text"

вместо нового элемента

1
input type="search"

, который еще не до конца поддерживается всеми браузерами:

<form class="catalin">
    <input type="text" placeholder="Search here ..." required>
    <button type="submit">Send</button>
  </form>

Довольно объемный, но это связано с теми эффектами, которые применены к данной форме:

form.catalin{
  width: 390px;
  margin: 50px auto;
  overflow: hidden;
  padding: 10px;
  background-color: #ccc;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,.3) inset;
}
  form.catalin input{
    float: left;
    border: none;
    padding: 2px 10px 2px 4px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 26px;
    width: 306px;
    margin: 0;
    -webkit-appearance: none;
    outline: none;
    box-shadow: 0 0 1px rgba(0,0,0,.5);
    border-radius: 3px 0 0 3px;
  }
  form.catalin button{
    float: left;
    border: none;
    background-color: #778899;
    padding: 0;
    margin: 0;
    width: 70px;
    height: 30px;
    font: bold 12px/30px Arial, Helvetica, sans-serif;
    position: relative;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,.5);
    border-radius: 0 3px 3px 0;
    text-transform: uppercase;
    text-align: center;
  }
    form.catalin button:hover{
      background-color: #667788;
    }
  form.catalin button:before{
    content: '';
    position: absolute;
    top: 10px;
    left: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #778899;
  }
    form.catalin button:hover:before{
      border-right-color: #667788;
      text-shadow: 1px 1px 1px rgba(255,255,255,.6);
    }

/* Placeholder
-----------------------------------------------------*/
  form.catalin input::-webkit-input-placeholder {
     color: #999;
     font-weight: normal;
     font-style: italic;
  }
   
  form.catalin input:-moz-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
  }
   
  form.catalin input:-ms-input-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
  }

И результат этого кода - красивое поле ввода с не менее красивой кнопкой отправки данных на сервер:

На этом все.

Кнопка внутри поля поиска - как создать с помощью CSS

November 11, 2013

Поле ввода и кнопка со стрелкой (псевдо-элемент) внутри.

VSC - explorer.compactFolders

Flattering operators

Оператор withLatestFrom