Question

我目前有一系列基于数字的输入字段框。我遇到的麻烦是添加一个＆＃39;％＆＃39;每个盒子末尾的符号。最终，我希望％符号对用户不可编辑，但不确定如何去做。任何想法都会有益

HTML

<div class="ModifiedValues">
    <span class="valuePadding"><center><b>New Value</b></center></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputRRPDiscount" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputMargin" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputMarkUp" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputSalesDiscount" style="text-align:left;"><br></span>
</div>

CSS

.ModifiedValues { 
        position: absolute;
        left: 250px;
        top: 28px;
        color: #666;
        font-size: 12px;
        width: 85px;
}   

.valuePadding { 
        padding:5px 5px 5px 5px;
        display:block;
}

Answer 1

你去吧

.valuePadding {
  border: 1px inset #ccc;
}
.valuePadding input {
  border: none;
  padding:0px;
  outline: none;
}

<span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputRRPDiscount" style="text-align:left;">%</span>
<br>

Answer 2

我会将您的跨度设置为您的输入，然后从输入中删除样式。然后，您可以使用after psuedo选择器添加百分比：

＆＃13;

.input-holder {
  border: 1px solid #cccccc;
  display: inline-block;
  padding: 5px;
}
.input-holder > input {
  border: 0;
  margin: 0;
  padding: 0;
  outline:none;
}
.input-holder:after {
  content: '%';
}

＆＃13;

<div class="ModifiedValues">
  <span class="valuePadding"><center><b>New Value</b></center></span>
  <span class="valuePadding input-holder"><input type="number" max="100" accuracy="2" min="0" id="inputRRPDiscount" style="text-align:left;"></span>
  <br>
  <span class="valuePadding input-holder"><input type="number" max="100" accuracy="2" min="0" id="inputMargin" style="text-align:left;"></span>
  <br>
  <span class="valuePadding input-holder"><input type="number" max="100" accuracy="2" min="0" id="inputMarkUp" style="text-align:left;"></span>
  <br>
  <span class="valuePadding input-holder"><input type="number" max="100" accuracy="2" min="0" id="inputSalesDiscount" style="text-align:left;"></span>
  <br>
</div>

＆＃13;

Answer 3

假设您要将这些元素放在相对定位的div中，您可以这样处理：

HTML：

<div class="col-md-6">
        <span id="percent-sign">%</span>
        <input type="number" min="0" max="100">
</div>

CSS：

<style>
    #percent-sign {
        top: 8px;
        left: 45px;
        color: #555;
        position: absolute;
        z-index: 1;
    }
</style>

请注意，我使用的是Bootstrap网格类（col-md-6），已经给出了div相对定位。如果情况不是这样，请将相对定位设置为div。

Answer 4

我刚刚制作了自定义百分比输入元素。

<html>
<head>
    <title>Input Percent</title>
    <link rel="stylesheet" href="style.css">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>  
<body>
  <div class="percent_input" id="red_liquid_percent">

     <div class="button_group">
          <i id="up_button" class="fas fa-sort-up"></i>
          <i id="down_button" class="fas fa-sort-down"></i>
      </div>
     <p id="percent_value">0%</p>
  </div>
</body>
</html>

您可以在此处检查JSFiddle sample。

在HTML输入字段中放置一个不可编辑的百分号

4 个答案: