HTML UI問題 - 我可以在INPUT type =文本框中有複選框嗎？

我正與一個HTML接口，其需要在IE7/8/9 &火狐運行更換一個WinForms屏幕。HTML UI問題 - 我可以在INPUT type =文本框中有複選框嗎？

目前在我們的屏幕之一，我們有一個時髦的輸入控制，看起來像這樣：

用戶只需鍵入：

的用戶可以通過以下三種方式之一輸入一個值進入方框
用戶可以從下拉列表中選擇一個項目
用戶可以勾選「未打開」複選框，該複選框有效選擇一個我們稱爲「未打開」的已知項目

還有一個搜索按鈕「...」但這是另一個控制這是很容易實現的。

我要重建這個使用HTML，我想知道如何更換未開封的功能，如（a）及（b）是很容易的。我想我只是將一個單獨的未打開的複選框放在INPUT框的下面，而不是放在它的內部，因爲那樣會更簡單。但是如果有辦法讓它看起來像現在這樣，我可能會更喜歡它。那可能嗎？

UPDATE：

次要的問題：如果我不使用CSS把輸入框裏面的複選框，我只是把在自己受了很多痛苦與古怪的小可用性和佈局問題，或者是這個東西是不是太不尋常或難以做到？

來源

2011-08-11 Rory

你可以把它放在一個單獨的div然後用CSS定位它看起來像是在輸入字段內：

#checkbox { 
position: relative; 
top: -10px; 
}

或任何值，你需要...

關於你提到的第二個問題：不。它實際上不是「在盒子裏面」，它看起來就是這樣。所有的功能將仍然存在。 =）

http://jsfiddle.net/BdBTy/是如何工作的一個簡單的例子。

來源

2011-08-11 22:02:21 craftsycandymonster

OK，現在我知道我能做到這一點，我是否_should_有什麼想法？例如我是從佈局還是可用性角度來問問題？ – Rory

哦，在我編輯之前沒有看到這個評論...佈局方面，這實際上很乾淨。所有功能仍然存在，但元素只是對齊，以便它們看起來更漂亮。與邊距和填充以及嵌套的開關不同，所有瀏覽器都支持簡單對齊。至於你是否應該，這是最簡單的方法，讓它看起來像現在。從佈局的角度來看，該領域內的盒子對我來說看起來有些奇怪，但如果這就是人們習慣的方式，那就去做吧？ – craftsycandymonster

謝謝，這個例子非常有用。我玩了一會兒，想了一會兒，並認爲另一種選擇是在INPUT框下面有一個鏈接，讓用戶選擇該選項，該選項將用適當的已知項目填充INPUT。例如http://jsfiddle.net/BdBTy/17/ 感謝您的幫助！ – Rory

地方檢查右側的文本框中以下HTML

在CSS的複選框把

margin-top:-25px;

（或任何你需要的確切數目）

來源

2011-08-11 22:01:34

HTML UI問題 - 我可以在INPUT type =文本框中有複選框嗎？

回答

相關問題