# Creating touch controls

When you design screen controls for touch-enabled devices, make them big enough to select with a finger.

### Specifying text box size

Specify text box size in a CSS file.

    .input_container input {
    	width: 100%;
    	height: 45px;
    	...

    }

### Creating touch buttons

Create clickable HTML elements and make them big enough to select with a finger. Add a JavaScript `onClick` handler to the buttons to make them clickable.

For example, the following code creates two arrow buttons that users can press to change views.

    <div id="navigationLeft" class="navigationBar">
      <img id="arrowLeft" src="gfx/arrow_left.png" alt="Previous day" onclick="navigationArrowClicked('left');" />
    </div>

    <div id="navigationRight" class="navigationBar">
      <img id="arrowRight" src="gfx/arrow_right.png" alt="Next day" onclick="navigationArrowClicked('right');" />
    </div>

Figure: Arrow buttons

You can also create custom controls. For more information, see Customizing screen controls.