Styling input in html

  • A+
Category:Languages

I have an input type password that only allow 6 digit number like this:

   <fieldset>      <label for="password-input">Enter New Pin</label>      <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"      maxlength="6" size="6" value="">      <span class="hint">New pin must be 6 digit number only</span>    </fieldset> 

it will show like this:

Styling input in html

how can i style it so it can look like this:

Styling input in html

 


try this:

input {   padding-left: 15px;   letter-spacing: 45px;   border: 0;   background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);   background-position: bottom;   background-size: 50px 1px;   background-repeat: repeat-x;   background-position-x: 35px;   width: 280px; }
 <fieldset>      <label for="password-input">Enter New Pin</label>      <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"      maxlength="6" size="6" value="">      <span class="hint">New pin must be 6 digit number only</span>    </fieldset>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: