Question

我已将以下内容添加到css和html文件中：

＆＃13;

.currencyinput {
  border: 1px inset #eee;
}

.currencyinput input {
  border: 0;
}

＆＃13;

<td><span class="currencyinput">$<input type="text" name="amount"></span></td>

＆＃13;

我的结果页面显示了$，然后在它下面的新行显示了文本框。我打算将$放在文本框中。

欣赏对此的任何见解。谢谢！

Answer 1

使用此css删除焦点边框input:focus{outline: none;}

＆＃13;

.currencyinput span{
   position: relative;
}
.currencyinput input{
   padding-left:20px; 
}
.currencyinput span{
 left:15px;
 top:0
  position: absolute;
}
.currencyinput input:focus {
   outline: none;
}

＆＃13;

<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>

＆＃13;

Answer 2

考虑使用带有边框的跨度来固定输入字段，边框少于输入字段。这是一个基本的例子：

<div class="container">
      <h3>Basic form example</h3>
         <div class="form-group">
            <div class="input-icon">
               <i>$</i>
              <input type="text" class="form-control" placeholder="0.00">
          </div>
       </div>
 <div class="form-group">
    <div class="input-icon input-icon-right">
      <i>€</i>
      <input type="text" class="form-control" placeholder="0.00">
    </div>
</div>
<div class="form-group">
   <div class="input-icon">
      <i class="fa fa-bitcoin"></i>
    <input type="text" class="form-control" placeholder="0.00">
  </div>
</div>
 <h3>Example using <code>form-inline</code></h3>
  <div class="alert alert-danger visible-xs">This window needs to be made 
          larger to see the inline example.</div>
   <form class="form-inline">
     Some text here
       <div class="form-group input-icon">
        <i>$</i>
      <input type="text" class="form-control" placeholder="0.00">
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
</div>

CSS：

 .input-icon {
    position: relative;
  }

  .input-icon > i {
     position: absolute;
     display: block;
     transform: translate(0, -50%);
    top: 50%;
    pointer-events: none;
    width: 25px;
    text-align: center;
   font-style: normal;
   }

 .input-icon > input {
    padding-left: 25px;
    padding-right: 0;
  }

 .input-icon-right > i {
     right: 0;
  }

 .input-icon-right > input {
     padding-left: 0;
     padding-right: 25px;
     text-align: right;
   }

在Css中添加货币值会将其置于单独的行

2 个答案: