HTML UI вопрос - можно ли установить флажок внутри текстового поля INPUT type =?

Question

Я заменяю экран winforms на интерфейс html, который должен работать в IE7 / 8/9 и Firefox.

В настоящее время на одном из наших экранов у нас есть необычный элемент управления вводом, который выглядит следующим образом:

Пользователь может ввести значение одним из трех способов:

1. пользователь может просто ввести в поле
2. пользователь может выбрать элемент из выпадающего списка
3. пользователь может установить флажок «Неоткрытое», которое эффективно выбирает известный элемент, который мы называем «Неоткрытое»

Существует также кнопка поиска "...", но это еще один элемент управления, который легко реализовать.

Я хочу перестроить это, используя html, и мне интересно, как заменить неоткрытые функции, так как (a) и (b) достаточно просты. Я думаю, что я просто поставлю отдельный неоткрытый флажок под полем INPUT, а не внутри него, потому что это будет проще. Но если есть способ сохранить его таким, как сейчас, я бы, наверное, предпочел бы это. Это возможно?

ОБНОВЛЕНИЕ:

Вторичный вопрос: если я поставлю флажок внутри поля ВВОДА с использованием CSS, я просто причиняю себе много боли из-за необычных небольших проблем с юзабилити или компоновкой или это не слишком необычно или сложно сделать?

Answer 1

Вы можете поместить его в отдельный div и затем поместить его с помощью CSS, чтобы он выглядел как внутри поля ввода:

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

или любых других значений, которые вам нужны ...

Относительно вашего второго вопроса: Нет.Это на самом деле не «внутри» коробки, это просто выглядит так.Вся функциональность все еще будет там.=)

http://jsfiddle.net/BdBTy/ - быстрый пример того, как это работает.

Answer 2

поместите чек прямо под текстовым полем в html

в css для галочки поставить

margin-top:-25px; 

(или любое другое точное число, которое вам нужно)