我需要将这样的表单字段添加到我的反馈中
我需要使用什么样的input
,我怎样才能使它看起来像上面那样?
请使用移动 jqueryui 和
<input type="button" class="ui-icon-plus">
<input type="button" class="ui-icon-minus">
.ui-icon-plus{}
.ui-icon-minus{}
此图标将自动生成。
我已经在 JSfiddle 上捣碎了一些东西。这只是一个示例,您应该自己进行微调:
<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;
}
}
您可以为每个字段使用两个按钮和一个文本框。您可能知道,样式可以通过 CSS 完成。上面的小条可以是一个列表或其他东西,下面的文本可以是一个标签。当然,有很多选择。
我会<input type="number">
在 :before 和 :after 中使用普通的。