当前位置: 动力学知识库 > 问答 > 编程问答 >

html - how to achieve following using css ( digits input )

问题描述:

I am trying to achieve following feature:

It's an input box, has 4 digits, once clicked, user can input 4 digits.

It's part of a mobile app.

Currently what I have achieved is : example, note that for some reason,

outline: none; works fine in my app but not work in this jsFiddle example.

My question is how to draw the 3 separation bar and also display those digits

just fit their position within it?

Is it achievable using css?

below are code:

<form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false">

<div data-role="fieldcontain">

<span>

<input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;">

</span>

</div>

<input type="submit" class="submitHidden">

</form>

css:

.ui-corner-all-input {

-webkit-background-clip: padding;

background-clip: padding-box;

-webkit-border-radius: .6em /*{global-radii-blocks}*/;

border-radius: .6em /*{global-radii-blocks}*/;

width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;

margin-top: 24px;

}

.ui-shadow-around {

-moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;

-webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;

box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;

border: 1px #b6b6b6 solid;

}

*:not(input):not(textarea) {

-webkit-user-select: none;

-webkit-touch-callout: none;

}

FORM[data-enhance="false"] INPUT, textarea {

outline: none;

}

FORM[data-enhance="false"] SPAN {

overflow: hidden;

display: block;

padding: 0 10px 0 0px;

text-align: left;

}

.submitHidden {

visiblity: hidden;

position: absolute;

opacity: 0;

}

网友答案:

You could do it like this:

HTML:

<table>
<tr>
  <td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
  <td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
  <td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
  <td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
</tr>

CSS:

.clock {
  color:darkgray;
  border-style:none;
  width:40px;
  height:60px;
  font-size:60px;
}

td{
  border:2px solid darkgray  
}
table {
  border-collapse:collapse;
}

JavaScript:

function next(next) {
  document.getElementById(next).focus();
}

Link: http://jsbin.com/uhaHunuq/1/edit?html,output

网友答案:

Maybe you can use four text input items and put them in a small table. With JavaScript, make each text box take one character and give the focus state to the next text box. The lines could be done with the table border and box. Use the CSS to hide the text box frame.

网友答案:

Here is my take on the problem.

It uses a proper input element (please don't make the life of your users harder than it already is) and a transparent background to render 4 blocks in the background.

.input-widget {
    vertical-align: top;
    margin-left: 1rem;
    font-size: 2rem;
    display: inline-block;
    position: relative;
}

.input-widget .input {
    width: 8rem;
    font-size: inherit;
    font-family: inherit;
    letter-spacing: 5px;
    background-color: transparent;
    border: none;
    -moz-appearance: textfield;
}

.input-widget .input::-webkit-inner-spin-button,
.input-widget .input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-widget .digit-background {
    position: absolute;
    top: 1px;
    left: 0;
    z-index: -1;
}

.input-widget .digit-background .digit {
    display: inline-block;
    float: left;
}

.input-widget .digit-background .digit::before {
    content: '0';
    color: lightgray;
    background-color: currentColor;
    display: inline-block;
    padding: 1px;
    margin: -1px 4px 0 -1px;
}
<div class="input-widget">
   <input type="number" max="9999" class="input" value="01234">
   <div class="digit-background">
     <div class="digit"></div>
     <div class="digit"></div>
     <div class="digit"></div>
     <div class="digit"></div>
   </div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: