Я пытаюсь добавить интервал между поиском lo go и границей в окне поиска.

Question

Мой поиск ... 1008 * застрял в левой части окна поиска, что я и сказал, но я пытаюсь получить небольшой интервал между ними.

#searchBox {
  flex: 50%;
  min-width: 300px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.text {
  border: 1px solid #000;
  border-radius: 20px;
  border-image-outset: 10px;
  height: 35px;
  width: 350px;
  padding-left: 25px;
  float: left;
  font-size: 15px;
  color: #000;
  outline: none;
  text-align: left;
  background: #fff url(images/search-logo.png)left center no-repeat;
}

<div id="searchBox">
  <form method="get">
    <input type="text" class="text" placeholder="">
    <input type="submit" value="search" class="submit">
  </form>
</div>

Answer 1

Пожалуйста, попробуйте этот фрагмент. Просто добавьте background-position и увеличьте отступ ввода.

#searchBox {
  flex: 50%;
  min-width: 300px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.text {
  border: 1px solid #000;
  border-radius: 20px;
  border-image-outset: 10px;
  height: 35px;
  width: 350px;
  padding-left: 40px;
  float: left;
  font-size: 15px;
  color: #000;
  outline: none;
  text-align: left;
  background: #fff url("https://img.icons8.com/android/24/000000/search.png") 10px 50% no-repeat;
}

<div id="searchBox">
  <form method="get">
    <input type="text" class="text" placeholder="">
    <input type="submit" value="search" class="submit">
  </form>
</div>