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:
<![CDATA[
<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>
]]>