I am not a designer, just regular programmer so my terminology might not be correct.

What I am trying to solve is that I have a quite narrow area where I should have n amount of input fields and an operator next to it.

Here is an example

My problem is that because of the limited space horizontally I need to have very compact control for operator, but it should be obvious that you can change it. As you can see the default select list has a huge arrow on the right-side of the select box and it is consuming space us much as the information itself (the operator).

What kind of control would be ideal for this kind three state selection?

  • Either find a JS script that allows changing the design of drop-down or let users enter freeform text & then put the string through a parser.
    – dnbrv
    Commented Mar 20, 2012 at 15:00

5 Answers 5


If you have enough vertical space, perhaps a spinner like control would work for you?


download bmml source – Wireframes created with Balsamiq Mockups

Looks quite ugly though, and very non-standard, of course. Still, painfully obvious that you can change it, and not wider than it needs to be.

Alternatively, perhaps a push button with a dropdown indicator:


download bmml source

Such menu-showing buttons are quite common. This option takes way less vertical space, but it takes more clicks to use. Perhaps you should allow typing as well, to make it easier for advanced users: they would not have to switch back and forth between keyboard (entering a number), mouse (selecting an operator) and back to keyboard (next number).

  • 1
    If you do choose to make a custom menu (as in both of these examples), be sure to factor in users who prefer the keyboard!
    – Kit Grose
    Commented Mar 20, 2012 at 22:38

If there are only a few operators you could implement a selectable list.

For example:


1 + 2   | = |   3


Obviously, this is non-standard, but it does take all the horizontal space and move it vertically. Even more space could be saved by changing the selection style. A selected element could have a different colour background instead of a box around it.


You can make it a little narrower using CSS:

option { width: 0.4em; padding: 0; }

Trying to squeeze even more is risky.

I can’t imagine a different control that would be comparable to a dropdown in intuitiveness.

  • Thanks. For some reason it didn't have any effect on jsFiddle that I sent. I am using latest version Chrome.
    – Tx3
    Commented Mar 21, 2012 at 8:52

I'm not sure if this was just a very basic mockup for the example but it seems like, depending on the anticipated values to to be used, the input text boxes might be the best place to cut down on horizontal space. I think the drop-down is a good choice for the operator, but I was able to type a 17 characters in your value field. If you anticipate your users will putting numbers in those fields and those numbers will be smaller than 10 quadrillion you could save horizontal space that way.

  • The mock up was very simple compared to the actual implementation, but you have a valid point. The number they type is between 1-7 characters depending on the field and normally the field is more narrow (scaling according to the resolution thou).
    – Tx3
    Commented Mar 21, 2012 at 8:42

I think you're exacerbating the effect by using small fields.

If you make the text bigger across all the form elements, the effect is lessened.

I'm generally of the opinion that using the default form elements is a much better idea than customising it (since every UA styles these things differently, and you can't always emulate those behaviours properly in a custom control).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.