Как поместить кнопку внутрь input?

Question

Как сделать такой input?

        <div id="file-info" style="display: none;">
            <input id="file-name" type="text" readonly/>
            <button class="button-drop-file"></button>
        </div>

Answer 1

Один из сотни способов:

#file-info {
  position: relative;
  display: inline-block;
}

.button-drop-file {
  position: absolute;
  right: 1px;
  top: 1px;
  border: none;
}

<div id="file-info">
  <input id="file-name" type="text" readonly/>
  <button class="button-drop-file">x</button>
</div>

Спозиционировать кнопку абсолютно.

Answer 2

Как сделать такой input?

Например так...

.test {
  display: inline-block;
  padding: 10px;
  border: 1px solid;
  border-radius: 5px;
}
.test input {
  border: 0;
  outline: none;
}
.test button {
  background-color: transparent;
  border: 0;
}

<div id="file-info" class='test'>
  <input id="file-name" type="text" value='Название презентации' />
  <button>X</button>
</div>

БЛОГ НА HUSL

Как поместить кнопку внутрь input?

Ответы (2 шт):