在HTML輸入字段中放置不可編輯的百分號

我目前有一系列基於數字的輸入字段框。我遇到的麻煩是在每個框的末尾添加一個'％'符號。最終我希望％符號不可編輯給用戶，但不確定如何去做。任何意見將是有益的在HTML輸入字段中放置不可編輯的百分號

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

來源

2016-11-30 alex johnson

在這裏你去

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

來源

2016-11-30 10:09:42

我禾將樣式設置爲你的輸入樣式，然後從輸入中刪除樣式。然後，您可以使用after僞選擇添加比例：

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

來源

2016-11-30 10:12:52 Pete

在HTML輸入字段中放置不可編輯的百分號

回答

相關問題