定制输入

-1

我需要这样的添加表单字段我的反馈
enter image description here 定制输入

什么样的input我需要用我怎样才能使它看起来像上面？

来源

2013-10-31 Heidel

我在想 ...... –

您可以使用图像。拆分输入的部分并创建相应的图像。然后用css实现精确的布局，使用js将捕获控件上的ui事件，例如点击按钮，然后相应地执行操作。 – melc

你尝试过什么吗？ – putvande

我已经在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; 
} 
}

来源

2013-10-31 11:07:48

非常感谢，我用你的答案，并改变了一点。 – Heidel

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

来源

2013-10-31 10:41:50

-2

我会用一个正常的<input type="number">：before和：after。

来源

2013-10-31 10:42:23 Heinrich

这不是一个真正的跨浏览器选项。 – putvande

否则必须有很多的JavaScript。 – Heinrich

是的..但这种方式FireFox将因为它不支持它而被淘汰。 – putvande

请使用移动jQueryUI的和

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

.ui-icon-plus{} 
.ui-icon-minus{}

该图标会自动生成。

来源

2013-10-31 10:52:31

回答

相关问题