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

Question

我有一个显示百分比的文本框。

我想要文本末尾的 % 符号，% 符号不应该是可编辑的，但文本框中的文本应该是可编辑的。

如何实施？

Answer 1

您可以使用 :after 伪元素在纯 CSS 中完成此操作。.inputbox-container:after {&nbsp; &nbsp; content: "\0025";&nbsp; &nbsp; margin-left: -25px;&nbsp; &nbsp; margin-right: 25px;&nbsp; &nbsp; padding-left: 6px;}input {&nbsp; padding-right: 20px;}<div class="inputbox-container"><input type="text"></div>

Answer 2

像引导程序input-group.input-group {&nbsp; display: flex;&nbsp; height: 30px}.input-group input {&nbsp; border: 1px solid #ced4da;&nbsp; width: 30px;}.input-group input:focus {&nbsp; border-color: #80bdff;&nbsp; outline: 0;}.input-group span {&nbsp; color: #495057;&nbsp; background-color: #e9ecef;&nbsp; border: 1px solid #ced4da;&nbsp; padding: 7px 5px;}<div class="input-group">&nbsp; <input type="text">&nbsp; <span>%</span></div>

Answer 3

尝试这个<input type="text"><label style="position:relative; left:-20px;">%</label>