Question

I’m replacing a winforms screen with an html interface, which needs to run in IE7/8/9 & Firefox.

Currently on one of our screens we have a funky input control that looks like this:

The user can enter a value in one of three ways:

1. the user can just type into the box
2. the user can select an item from the dropdown
3. the user can tick the ‘Unopened’ checkbox, which effectively chooses a known item we call ‘Unopened’

There’s also a search button ‘…’ but that’s another control which is easy to implement.

I want to rebuild this using html and am wondering how to replace the Unopened function, as (a) and (b) are easy enough. I’m thinking I’ll just put a separate Unopened checkbox beneath the INPUT box instead of inside it, because that would be simpler. But if there’s a way to keep it looking like it does now I’d probably prefer that. Is that possible?

UPDATE:

Secondary question: if I do put the checkbox inside the INPUT box using CSS am I just bringing upon myself a lot of pain with quirky little usability or layout problems or is this something that’s not too unusual or hard to do?

Answer 1

You can put it in a separate div and then position it with CSS to look like it’s inside of the input field:

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

or whatever values you need…

Regarding your second question: Nope. It’s not actually “inside” the box, it just appears that way. All the functionality will still be there. =)

http://jsfiddle.net/BdBTy/ is a quick example of how this works.