如何将 % 符号永久放在文本框中的文本末尾？

Question

我有一个显示百分比的文本框。我想要文本末尾的 % 符号，% 符号不应该是可编辑的，但文本框中的文本应该是可编辑的。如何实施？

Answer 1

您可以使用 :after 伪元素在纯 CSS 中完成此操作。

.inputbox-container:after {

    content: "\0025";

    margin-left: -25px;

    margin-right: 25px;

    padding-left: 6px;

}

input {

  padding-right: 20px;

}

<div class="inputbox-container"><input type="text"></div>

Answer 2

像引导程序input-group

.input-group {

  display: flex;

  height: 30px

}

.input-group input {

  border: 1px solid #ced4da;

  width: 30px;

}

.input-group input:focus {

  border-color: #80bdff;

  outline: 0;

}

.input-group span {

  color: #495057;

  background-color: #e9ecef;

  border: 1px solid #ced4da;

  padding: 7px 5px;

}

<div class="input-group">

  <input type="text">

  <span>%</span>

</div>

Answer 3

尝试这个

<input type="text">

<label style="position:relative; left:-20px;">%</label>