Example 5b: Using external CSS Style Sheets

This is a modification of the previous example. Owing to limitations of JavaScript, the "set frame slider" (the setframe control) cannot be completely styled using the "setframe_style=" parameter, so we must rely on CSS styling defined in the HTML.

This example makes use of the CSS class name selector attributes that HAniS creates for all controls (in this case, however, only the "setframe" class name). Here is what we specified in the <head> element:

<style> #handiv .setframe { -webkit-appearance: none; width: 100%; height: 8px; cursor: pointer; border-radius: 5px; background: orange; } #handiv .setframe:focus { outline: none; } #handiv .setframe::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border: 1px solid white; border-radius: 5px; background: red; cursor: pointer; } #handiv .setframe::-moz-range-thumb { height: 20px; width: 20px; background: red; border: 1px solid white; border-radius: 5px; cursor: pointer; } </style>

Go To Front Page
Next Example
This webapp Copyright© 2014- by Tom Whittaker