Default input's width is 150 pixels. su-placeholder increases original element width by itself. Use su-width attribute to set exact width of input with placeholder.

Simple placeholder

Default width is 150 pixels is summed with placeholder's width.

<input type="text" su-placeholder="$" />

Right Placeholder with inline set width

Default width is 150 pixels is summed with placeholder's width.

<input type="text" su-placeholder-right="meters" style="width: 50px" />

Right Placeholder with su-width

Alternative way to set with with su-width attribute.

<input type="text" su-placeholder-right="meters" su-width="100" />

Default input style is defined with rounded corners. Sometimes is necessary to group some inputs in which case it would look weird. To apply better styles for group of inputs use su-input-group wrapper:

<div class="su-input-group">
    <input type="text" su-placeholder="$" su-width="60" />
    <input type="text" su-placeholder="&cent;" su-width="60" />
</div>

Instead of default select-elements you can use styled su-select. It can apply Interaction Elements colours.

There is one feature you should take into account: if width is not set (it could be set with su-width attribute), control will take width of currently selected option.

Simple su-select

<su-select name="select">
    <option value="0">Option one</option>
    <option value="1">Option two</option>
    <option value="2">Option three</option>
</su-select>

Option oneOption twoOption three

Su-select with set width and colour

<su-select class="su-positive" name="green-select" su-width="200">
    <option value="0">Option one</option>
    <option value="1" selected>Option two</option>
    <option value="2">Option three</option>
</su-select>

Option oneOption twoOption three

There's also possible you'll need a ability to make selection of multiple items in su-select-elements. So, in this case just set su-max property in root-element. Set value 0 for unlimited number of selected elements.

If su-min property is set and it's equal to number of checked items then it will be impossible to remove any selected item.

<su-select name="multiple-select" su-min="1" su-max="3" su-width="200">
    <option value="0">Option one</option>
    <option value="1" selected>Option two</option>
    <option value="2">Option three</option>
    <option value="3" selected>Option four</option>
    <option value="4">Option five</option>
</su-select>

Option oneOption twoOption threeOption fourOption five

In case of absence of su-min property and zero number of selected items there would be displayed default message "Nothing is selected" that could be replaced by su-empty-value property.

<su-select name="another-select" su-max="0" su-empty-value="No selection" su-width="200">
    <option value="0">Option one</option>
    <option value="1">Option two</option>
    <option value="2">Option three</option>
</su-select>

Option oneOption twoOption three