我正在尝试实现以下布局,但是所有尝试都失败了。正如您在下面的代码片段中看到的那样,它在台式机和iPad上看起来并不正确。
基本上,我有一个数字输入字段,访客可以在其中输入四位数的邮政编码以获取结果。
我不想创建四个不同的输入并给它们加上边框以获取所需的布局。
可以仅使用一个输入框来完成此操作吗?
input {
background: linear-gradient(to right, #eff1f1, #eff1f1 25px, white 10px, white 40px, #eff1f1 40px, #eff1f1 65px, white 10px, white 80px, #eff1f1 80px, #eff1f1 105px, white 10px, white 120px, #eff1f1 120px, #eff1f1 145px, white 10px, white 160px);
width: 180px !important;
height: 30px !important;
font-size: 20px;
font-weight: 900;
letter-spacing: 29px;
padding-left: 5px;
text-align: left;
margin: 10px auto -5px auto;
color: transparent !important;
text-shadow: 0px 0px 0px #666;
}
<input type="number"></input>
答案 0 :(得分:1)
尝试一下
$(document).ready(function(){
$(".input").keyup(function(){
var len=$(this).val().length;
if(len==4){
$(".input").blur();
}
});
});
.box{
height:300px;
width:300px;
}
.input{
height:40px;
width:200px;
background:transparent;
border:none;
font-size:25px;
letter-spacing:36px;
text-indent:15px;
}
.input:focus{
outline:none;
}
.inputbg1,.inputbg2,.inputbg3,.inputbg4{
z-index:-1;
position:absolute;
height:44px;
width:40px;
background:#f1f1f1;
border-right:solid 10px #fff;
border-left:solid 10px #fff;
}
.inputbg1{
left:0px;
}
.inputbg2{
left:50px;
}
.inputbg3{
left:100px;
}
.inputbg4{
left:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<input type="text" class="input" max-length="4">
<span class="inputbg1"></span>
<span class="inputbg2"></span>
<span class="inputbg3"></span>
<span class="inputbg4"></span>
</div>
答案 1 :(得分:1)
如果样式布局是您的问题,那是什么?
input {
background: linear-gradient(to right, #eff1f1, #eff1f1 25px, white 10px, white 40px, #eff1f1 40px, #eff1f1 65px, white 10px, white 80px, #eff1f1 80px, #eff1f1 105px, white 10px, white 120px, #eff1f1 120px, #eff1f1 145px, white 10px, white 160px);
width: 180px !important;
height: 30px !important;
font-size: 20px;
font-weight: 900;
letter-spacing: 29px;
padding-left: 5px;
text-align: left;
margin: 10px auto -5px auto;
color: transparent !important;
text-shadow: 0px 0px 0px #666;
border: none;
}
input:focus {
outline: none;
}
<input type="text" pattern="\d*" maxlength="4">
基本上,您认为布局几乎可以。我只是删除轮廓边框以使其看起来更好。另一边注maxlength
在this的input type=number
中被忽略。请让我知道,这是否是您想要的。谢谢。