Issue
I wanna build an input with fixed text | KG at the end, and remove the default ^ v input type of number:
That's what I want
That's what I've tried so far:
function isNumberKey(txt, evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode == 46) {
if (txt.value.indexOf('.') === -1) {
return true;
} else {
return false;
}
} else {
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
}
return true;
}.field {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-size: 1.1rem;
text-transform: uppercase;
background-color: rgba(36, 141, 127, 0.4);
}
input {
background-color: rgba(14, 78, 72, 0.6);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 9px;
outline: none;
color: wheat;
font-size: 1.1rem;
position: relative;
}
.kg::after {
content: "| KG";
position: absolute;
right: 3px;
top: 2px;
}<html>
<body>
<div class="field">
<label for="gesier"> gesier</label>
<input type="number" id="gesier" class="kg" onkeypress="return isNumberKey(this,event);" />
</div>
</body>
<style></style>
</html>Solution
You have to wrap the input and the text (KG) with a container. these container assign a position: relative;. The tag which holds the text KG assign position: absolute.
To hide the arrows in your input field you can use the css property: -moz-appearance: textfield;
input[type=number] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
working example
.field {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-size: 1.1rem;
text-transform: uppercase;
background-color: rgba(36, 141, 127, 0.4);
}
.wrapper {
position:relative;
}
span {
position:absolute;
top:10px;
right: 10px;
}
input {
background-color: rgba(14, 78, 72, 0.6);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 9px;
outline: none;
color: wheat;
font-size: 1.1rem;
position: relative;
}
.kg::after {
content: "| KG";
position: absolute;
right: 3px;
top: 2px;
}
input[type=number] {
-moz-appearance: textfield;
}<html>
<body>
<div class="field">
<label for="gesier"> gesier</label>
<div class="wrapper">
<input type="number" id="gesier" class="kg" />
<span>kg</span>
</div>
</div>
</body>
<style></style>
</html>Answered By - Maik Lowrey
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.