Css Tricks, SearchBar по горизонтали 2 цвета фона - PullRequest
Новая
       16

Css Tricks, SearchBar по горизонтали 2 цвета фона

0 голосов
/ 26 февраля 2019

Я почти со своим дизайном CSS, но у меня просто небольшая проблема с моей реализацией.

Я пытаюсь сделать следующее:

Background

Я хочу, чтобы панель поиска находилась между моим двухцветным фоном.Проблема в том, что когда я увеличиваю / уменьшаю, моя строка поиска движется вверх или вниз, но не следует за линией, и я не хочу этого.

Мне было интересно, есть ли мошенничество.Сейчас я попытаюсь сделать это: TopBackGround И затем добавлю второй div внизу.Это единственное решение, которое я нашел на данный момент.Но, может быть, если у кого-то есть лучший способ с линейным градиентом или что-то в этом роде, почему бы и нет!

Я оставляю здесь ссылку, если вы хотите увидеть: jsFiddle: https://jsfiddle.net/yo7pzfda/

1 Ответ

0 голосов
/ 26 февраля 2019

Попробуйте использовать отрицательное поле для поля ввода и поместить его в верхнюю часть содержимого div.Это сместит его вверх на несколько пикселей в вышеупомянутый элемент div и сохранит его при изменении размера экрана.

фрагмент: 

body {
  background-color: gray;
  margin: 0;
  padding: 0;
}

input {
  height: 30px;
  width: 300px;
  border-radius: 5px;
  margin-top: -5%;
}

#content {
  background-color: blue;
  padding: 0;
  margin: 0;
  margin-top: 7%;
  min-width: 100vh;
  min-height: 100vh;
  text-align: center;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
<div id="content">
  <input placeholder="Search...">
</div>
...