This page uses JavaScript and requires a JavaScript enabled browser.Your browser is not JavaScript enabled.
Demo:Loading...
Demo:Skip to content
Please visit the Accessibility link to enable screen reader optimized content.
selectOneChoice Demo
Accessibility
About 11.1.2.4.0...
Home
Documentation
Tag Doc...
Skinning...
Release Information...
JavaDoc...
JS Doc...
Component Sub-ID Documentation...
Related Demos
Tag Demo
View Source
Page...
Page Template...
Global Tools Fragment...
Skin
Custom
Extends fusion
richDemo
Extends fusion-simple
gold
README
flip the themes
gold - set colors
gold - generated images
gold - final version
green
green
greenNoImages
Extends blafplus
princess
rainforest
sporty
Extends simple
debug
Fusion
fusionFx v2.1
fusionFx v2
fusionFx v1.1
fusionFx
fusion-11.1.1.3.0
fusion
Fusion Simple (easy to colorize)
fusionFx-simple v2.1
fusionFx-simple v2
fusionFx-simple v1.1
fusionFx-simple
fusion-simple
BLAF+
blafplus-rich
blafplus-medium
simple
Settings
I use a screen reader
I use high contrast
I use large fonts
Enable animations
Optimize partial page rendering
Tabbed presentation
Change to dimensions from children
Change to dimensions from parent
Skinning
>
selectOneChoice Demo
Bookmarkable Link
Find
Tag Guide
Skinning
Alphabetical
Skinning
Input
Layout
List of Values
Menu and Toolbar
Miscellaneous
Navigation
Output
Popup
Query
Table
Features
Demo:Collapse
Demo:Expand
Demo:Expand All Below
Demo:Collapse All Below
Demo:Show as Top
Feature Demos
Visual Designs
Styles
Commonly Confused
Tag Guide
Skinning
Feature Demos
Visual Designs
Styles
Commonly Confused
This page demos selectOneChoice's skinning keys that are defined in the demoComponents skin.
Style Selectors
…
Select the styles that you wish to see displayed in the panel on the right.
Select the styles that you wish to see displayed in the panel on the right.
Demo:All
af|selectOneChoice {background-color:pink}
af|selectOneChoice::access-key {color: aqua;}
af|selectOneChoice::content {background-color:red}
af|selectOneChoice::label {color:red}
af|selectOneChoice::compact-content {border: 2px solid blue} [1]
af|selectOneChoice::compact-dropdown {border: 1px solid green} [1]
af|selectOneChoice::compact-dropdown-icon-style {background-image: url('/afr/scrollDown_n.png')} [1]
af|selectOneChoice::dropdown-panel {background-color: pink} [1] [2]
af|selectOneChoice::item {color: red} [1] [2]
af|selectOneChoice::separator {border-bottom:1px solid #97FF93} [1] [2]
af|selectOneChoice:read-only {background-color:yellow}
af|selectOneChoice:read-only::content {background-color:purple}
af|selectOneChoice:read-only::label {color:blue}
af|selectOneChoice:disabled {background-color:#00C000}
af|selectOneChoice:disabled::content {background-color:#00C0C0}
af|selectOneChoice:disabled::label {color:#0000C0}
af|selectOneChoice::dynamic-help-icon-style {background-color: red}
af|selectOneChoice::dynamic-help-icon-style:hover {background-color: green}
af|selectOneChoice::dynamic-help-icon-style:active {background-color: blue}
[1] compact mode only
[2] only visible when dropdown panel is visible
Icons
…
Aliases
…
C
?
D
rink
coffee
tea
milk
Read
O
nly:
tea
D
isabled:
coffee
tea
milk
?
D
rink (mode='compact')
coffee
tea
milk
Geometry Management
Component container display mode:
Stretched
|
Flow with Width
|
Flow without Width
Print Content
Demo:OK
Demo:OK
Demo:Cancel