0

Вот такая проблема:

введите сюда описание изображения

Как сдвинуть область для ввода текста в <input>, а заодно и placeholder, чтобы ввод текста начинался после иконки?

.search {
  float: left;
  width: 400px;
  margin-top: 31px;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #24356f;
  line-height: 20px;
  position: relative;
}

.search_div img {
  position: absolute;
  left: 5px;
  top: 8px;
}

.search input[type=text] {
  height: 24px;
  font-size: 15px;
}

.search input[type=submit] {
  height: 32px;
  padding: 0;
  margin: 0;
}
<div class="search">
  <div class="search_div">
    <img src="http://via.placeholder.com/20x20/000000/ffffff">

    <input type="text" size="30" placeholder="Товары для стоматологии" />

    <input type="submit" size="10" value="Найти" />
  </div>
</div>

2
  • 1
    padding для input задать? 13 ноя 2018 в 14:03
  • @sergey-dev генеально
    – Dmitriy
    13 ноя 2018 в 14:04

2 ответа 2

2
.search input[type=text]{
    padding-left: 24px;
    height:24px;
    font-size: 15px;
}
1

.search {
    float: left;
    width: 400px;
    margin-top: 31px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #24356f;
    line-height: 20px;
    position: relative;
}

.search_div img {
    position: absolute;
    left: 5px;
    top: 8px;
}

.search input[type=text] {
    height: 24px;
    font-size: 15px;
    padding-left: 25px;
}

.search input[type=submit] {
    height: 32px;
    padding: 0;
    margin: 0;
}
<div class="search">
  <div class="search_div">
    <img src="images/Search.png" >
    <input type="text" size="30" placeholder="Товары для стоматологии"/>
    <input type="submit" size="10" value="Найти" />
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.