Как сделать input нижней линией?

Question

[Богдан]

Всем привет, подскажите пожалуйста, как нарисовать input такой вот нижней линией? Чтобы над ней вводился текст?

Answer 1

[FinGanapre]

Иконку кнопкой можно пристроить рядом, с похожими стилями, обернуть всё в общий контейнер с каким-нибудь data-input, ловить клики по кнопкам, чистить соседний инпут от кнопки.
<input type="text" value="" class="some-input">

body, html {
  background-color: black;
  color: white;
}

.some-input {
  border: none;
  border-bottom: 1px solid white;
  background-color: transparent;
  color: inherit;
  outline: none;
}

Comments

[Богдан]

Спасибо!

[Dima Polos]

Даже нет, вот тут поляна точно

Answer 2

[Pashadip]

input {
background: transparent;
border-bottom: 1px solid #fff;
}

Comments

[Богдан]

Почему-то получается такая вот штуковина

[Pashadip]

input {
   background: transparent;
   border: 0;
   border-bottom: 1px solid #fff;
}

[Богдан]

Спаибо!

[Dima Polos]

underlower, спасибом не отделаетесь) тут поляну накрывать надо ;) а вообще если есть ответ - есть кнопка для этого)

Answer 3

[Dima Polos]

Это же бордер

Comments

[Богдан]

Ну да, но мне нужно над ним вводить информацию, то есть через input?

[Dima Polos]

underlower, в чем проблема? даете инпуту паддинг и бордер боттом

Answer 4

[Стас Хитрич]

Если нет возможности использовать padding и border-bottom, можете псевдо элементом сделать