Question

我想在文本框的开头保留美元符号。我可以使用下面的代码实现这一点。

它可以在chrome和IE中找到它。美元符号去火狐旁边的标签旁边。我该如何解决这个问题？为了使美元符号与文本内联，我使用前2px。有没有办法改善CSS代码。

＆＃13;

.input-symbol-dollar:after {
  color: #37424a !important;
  content: "$";
  font-size: 16px !important;
  font-weight: 400;
  left: 10px;
  position: absolute;
  top: 2px;
}

.input-symbol-dollar {
  position: relative;
}

.abc-input {
  border: 2px solid #c9c9c9;
  box-shadow: none;
  color: #6b6f72;
  font-size: 0.9375rem;
  text-transform: none;
  width: 100%;
  color: #37424a !important;
  font-family: "Roboto Regular", sans-serif;
  font-size: 16px !important;
  font-weight: 400;
  height: 42px !important;
  padding-left: 17px !important;
  display: inline-block !important;
}

label {
  color: #37424a;
  display: inline-block;
  font-family: "Roboto Bold", sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

＆＃13;

<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input  type="text" id="abcInput" tabindex="0" name="abc" class="abc-input "  placeholder="0.00"></span>

＆＃13;

https://jsfiddle.net/8jdek3zt/5/

Answer 1

之所以发生这种情况，是因为span是一个内联元素，因此它的定位并不像您期望的那样进行计算。最简单的解决方案是在display: block

上设置<span class="input-symbol-dollar">

至于以更干净的方式定位它，你可以考虑制作符号显示块，高度为输入的100％，并设置行高等于输入高度。我已经更新了您的小提琴，但相关代码如下：

https://jsfiddle.net/chzk1qgm/1/

.input-symbol-dollar {
  position: relative;
  display: block;
}
.input-symbol-dollar:after {
    color: #37424a !important;
    content: "$";
    font-size: 16px !important;
    font-weight: 400;
    position: absolute;

    display: block;
    height: 100%;
    top: 0;
    left: 10px;
    line-height: 46px; // height of input + 4px for input border
}

或者，您可以将<{strong}更改 span到div，因为div默认是块级元素。其余的风格将保持不变。

Answer 2

看起来你的例子中有很多不必要的代码。

这是一个适用于Chrome，Firefox和IE的简化版本（未在Safari中测试）。

span {
  display: inline-block;
  position: relative;
}

input {
  border: 2px solid #c9c9c9;
  box-shadow: none;
  font-family: "Roboto Regular", sans-serif;
  font-size: 1.5em;
  height: 42px;
  padding-left: 20px;
}

span::before {
  content: "$";
  font-family: "Roboto Regular", sans-serif;
  font-size: 1.5em;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

<span>
<input placeholder="0.00">
</span>

以下是伪元素的垂直居中方法的解释：

Element will not stay centered, especially when re-sizing screen

Answer 3

尝试将span放入div。

<label for="abcInput" class="abc-label">lable filed </label>
<div>
    <span class="input-symbol-dollar">
        <input  type="text" id="abcInput" tabindex="0" name="abc" class="abc-input "  placeholder="0.000">
    </span>
</div>

Answer 4

＆＃13;

.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}

＆＃13;

<div class="custom-text">
    <span>$</span>
    <input style="border: none;"/>
</div>

＆＃13;

将美元符号放在文本输入中

4 个答案: