CSS on INPUT element not rendering correctly-CodePudding

The problem I have is that my input fields are not being rendered correctly. The span tag appears to be below the input.

I've tried setting the z-index of span to a large number making the borders of the input transparent

span.currencyinput {
  border-radius: 10px;
  border-width: 1px;
  height: 24px;
  margin: 5px;
  margin-left: 10px;
  width: 170px;
  z-index: 3;
}

span.currencyinput>input {
  position: absolute;
  top: -6px;
  left: -6px;
  border-style: double;
  border-width: 1px;
  border-color: transparent;
  width: 160px;
  margin-left: 15px;
}

.currencyinput {
  border: 1px inset #ccc;
  padding-bottom: 1px;
  position: relative;
  /* //FOR IE & Chrome */
}

.currencyinput input {
  border: 0;
}

input:focus {
  border-color: greenyellow;
}

input {
  border-radius: 10px;
  border-width: 1px;
  height: 24px;
  margin: 5px;
  text-align: center;
}

.form-item>input {
  width: 170px;
}

<span >$<input type="number"  id="form21" maxlength="6"></span>

CodePudding user response：

You should use a label and position it over the element. There are other ways to do it.

div.money {
  position: relative;
}

div.money label{
  position: absolute;
  margin-left: .25em;
  font-size: .9em;
  line-height: 1.5em;
}

div.money input {
  padding-left: .8em;
}

<div >
  <label for="num1">$</label>
  <input id="num1" type="number" />
</div>

CodePudding user response：

.currencyinput > input {
  padding: 0 0 0 20px;
  position: relative;
  left: -10px;
  z-index: -1;
}

<span >
  $<input type="number"  id="form21" maxlength="6">
</span>

CodePudding user response：

#form21 {
  border: none;
}

#form21:focus {
  outline: none;
}
.currencyinput {
  padding: 1px 2px;
  border: 1px solid rgb(118, 118, 118);
}

<span >
  $<input type="number"  id="form21" maxlength="6">
</span>