定制输入

Question

我需要将这样的表单字段添加到我的反馈中

我需要使用哪种input，如何让它看起来像上面那样？

Answer 1

请使用mobile jquery ui和

<input type="button" class="ui-icon-plus">
<input type="button" class="ui-icon-minus">

{{2p>此图标将自动生成。

Answer 2

我在JSfiddle上捣乱了一些东西。这只是一个例子，你应该自己进行微调：

http://jsfiddle.net/AvAV3/

   <div class="rate">
       <ul>
           <li class="selected"></li>
           <li class="selected"></li>
           <li class="selected"></li>
           <li class="selected"></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <br />
       <a class="minus" href="#">-</a> <input class="number" type="text" /> <a class="plus" href="#">+</a>
       <span>Kazaar</span>
</div>


body {
 background-color: #000000;   
}

.number {
width: 30px;
}

.minus, .plus {
 font-size: 15px;
    font-weight:bold;
    background-color: #3E3935;
    color: #FFFFFF;
    padding:3px 10px;
    display: inline-block;
    text-decoration: none;
}
.rate {
width: 100px;
}
.rate input {
 background-color: #ccc;   
    border:0;
    height: 22px;

}
.rate > span {
display: block;
color: #FFFFFF;
font-size: 17px;
text-align: center;
padding-top: 10px;
}
.rate > ul {
list-style-type: none;
width: 100%;
height: 0px;
padding: 0;
margin: 0;
}
.rate > ul li {
 background-color: #A2A19F;   
 display: inline-block;
padding:3px;
    margin: -1px;
}

.rate > ul li.selected {
 background-color: #FFFFFF;   
}
}

Answer 3

您可以为每个字段使用两个按钮和一个文本框。您可能知道，可以通过CSS完成样式设置。上面的小条可以是列表或其他东西，下面的文字可以是标签。当然，有很多选择。

Answer 4

我会使用普通的<input type="number">：之前和之后。