定製輸入

-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

回答

相關問題