Place a non editable percentage sign within a HTML input field

前端未结

关注

 4  1682

I currently have a series of input field boxes which are numerical based. The trouble I am having is adding a \'%\' symbol at the end of each box. Ultimately i want the % sy

相关标签:

4条回答

温柔的废话

2021-01-02 18:29

I would style your spans to look like your inputs and then remove the styles from the input. You can then use the after psuedo selector to add the percentage:

.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: '%';
}

<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>

0 讨论(0)

北海茫月

2021-01-02 18:30
Assuming that you're going to put these elements within a relative positioned div, you could handle it this way:

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>
```
Notice that I'm using Bootstrap grid classes (col-md-6), which already gave that div relative positioning. If that's not your case, set relative positioning to your div.
0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2021-01-02 18:47

I just made the custom percent input element.

<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>

You can check JSFiddle sample here.

0 讨论(0)

既然无缘

2021-01-02 18:49

Here you go

.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>

0 讨论(0)