Можно ли поместить элемент в поле ввода?

Можно ли вставить элемент в поля ввода? Вот пример:

Что я могу использовать для этого?

Мне было интересно узнать о таблицах, можно ли сделать таблицу внутри поля ввода?

.box-login {
  width: 300px;
  height: auto;
  margin: 0 auto
}

.box-login .bots {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radx-inpuius: 3px;
  -ms-border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  -ms-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  background-color: #fff;
  position: relative
}

.box-login .box-inputs .line-input {
  width: 100%;
  height: 50px;
  padding-left: 0;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
}

.box-login .btn-login {
  width: 100%;
  margin: 0;
  height: 50px;
  color: #fff;
  border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -ms-border-radius: 0 0 3px 3px;
  background-color: #009edb;
  border: none;
}

<form class = "box-login">

  <div class = "box-inputs">
    <label class = "box-input" for = "cpf"></label>
    <input class = "line-input" id = "cpf" type = "text" placeholder = "CPF">
  </div>

  <div class = "box-inputs">
    <label for = "box-input">
            <input class = "line-input" id = "password" type = "password" placeholder = "Senha">
            </label>

  </div>
  <div>
    <button class = "btn-login">ENTRAR</button>
  </div>
</form>

Используйте псевдоэлемент, или похоже, что ваши входные данные уже обернуты, вы можете использовать <i>

— 20.04.2018 06:22

Спасибо @Darkrum, что, возможно, поможет! Вы можете прислать мне пример?

— 20.04.2018 06:25

@epascarello Как это изображение: prnt.sc/j7nki6, я искал :: before (псевдоэлемент CSS). Для теста я добавил это в CSS: line-input :: before {content: url ("loading.gif"); } но ничего не произошло

— 20.04.2018 06:31

javascript html css

20.04.2018 06:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

898

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Нет, у вас не может быть элемента любой, содержащегося в <input> элемент.
Это пустой (void) элемент, и закрывающий тег должен быть опущен. Таким образом, в нем не может быть никаких элементов.

Спасибо за комментарий. Ты хоть представляешь, как заставить его работать? Я имею в виду, если ввод идет немного дальше, чтобы уместиться в таблице? или, может быть, сделать div с заполнением?

— 20.04.2018 06:21

Вы можете использовать margin и padding для управления выравниванием / смещением элементов. Но вы, конечно, не можете содержать какой-либо другой элемент в элементе <input>.

— 20.04.2018 06:26

Есть ли практический способ создать таблицу, чтобы ограничить использование значка перед началом ввода? в случае с границей 0, если да, не могли бы вы мне помочь? предложенный псевдоэлемент не работал

— 20.04.2018 06:33

20.04.2018 06:18

Ответ принят как подходящий

Лучший способ сделать это - иметь элемент с position: absolute и поместить его над полем ввода. Попробуйте этот код.

<form class = "box-login"  >

        <div class = "box-inputs">
            <span class = "icon"><img src = "https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/102-128.png"></span>
            <label class = "box-input" for = "cpf"></label>
            <input class = "line-input" id = "cpf" type = "text" placeholder = "CPF">
        </div>

        <div class = "box-inputs">
            <span class = "icon"><img src = "https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/102-128.png"></span>
            <label for = "box-input">
            <input class = "line-input" id = "password" type = "password" placeholder = "Senha">
            </label>

        </div>
        <div>
            <button class = "btn-login">ENTRAR</button>
</div>
</form>

.box-login{width:300px;height:auto;margin:0 auto}
 .box-login .bots{width:100%;height:auto;margin:0;border-radius:3px;-webkit-border-radius:3px;-moz-border-radx-inpuius:3px;-ms-border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.2);-webkit-box-shadow:0 0 4px rgba(0,0,0,.2);-moz-box-shadow:0 0 4px rgba(0,0,0,.2);-ms-box-shadow:0 0 4px rgba(0,0,0,.2);background-color:#fff;position:relative}

 .box-login .box-inputs .line-input{width:100%;height:50px;padding-left:40px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;
border-left:0px;
border-top: 0px;
border-right:0px;
 }

 .box-login .btn-login{width:100%;margin:0;height:50px;color:#fff;border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;background-color:#009edb;


    border: none;}

  .box-inputs {
    position: relative;
  }
  .box-inputs .icon {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 10px;
    z-index: 2;
  }
  .box-inputs .icon img {
    width: 100%;
  }

Понемногу, и мне становится лучше, спасибо за то, что поделились своими знаниями

— 20.04.2018 06:37

20.04.2018 06:32