Question

我想为单位测量创建一个文本框。 Eg＆＃34; 1 Kg＆＃34;。我知道可以在文本框后面包装文本，但我希望单元位于文本框本身。虽然可以更改数字，但它背后的单位应该只保留在文本框本身的末尾。有办法吗？可能使用CSS？

谢谢！

Answer 1

将您的输入包装在div中，将您的单位作为子元素添加到该div中，并将其放置在文本框上方。

JSBIN：http://jsbin.com/mayurexoyi/1/edit?html,css,output

HTML

  <div class="input_wrapper">
    <input type="text" value="20" />
    <div class="unit">KG</div>
  </div>

CSS

input {
  font-size:14px;
  padding:10px 25px 10px 10px;
  border:1px solid #CCC;
}

.input_wrapper {
  float:left;
  position:relative;  
}

.input_wrapper .unit {
  position:absolute;
  right:10px;
  top: 14px;
  color:#999;
}

Answer 2

试试这个：

  <span contenteditable name="kgData" style='border: thin solid #000;'> Enter Value </span>
  <span contenteditable=false> Kg</span>

提交后，获取kgData，然后您可以访问其他页面上的数据/将其保存在db中。如果有帮助的话，请参阅。

Answer 3

我认为这会帮助你。

HTML：

<div>

    <input type="text" />
    <label>kg</label>
</div>

CSS：

div{
  border:1px solid gray;
  width: 180px;
}
label{
font-family:arial;
 font-size:.8em;
}
input{
  border:none;
}
input:focus{
outline:none;
}

查看fiddle

HTML TextBox永久文本后面的数字

3 个答案: