Do more with styles: Pseudo classes (interactive styles).
As you may already know, styles can be useful to quickly apply the same style to multiple objects. You can create/edit styles in the Style Manager. For more information see also this related tutorial:
Using the Style Manager. However you can also use styles for interaction! For instance you can create hover effects without events or JavaScript by defining styles with pseudo-classes.
Pseudo-classes allow you to style elements as the user interacts with them providing visible feedback:
:hover
changes the appearance of the object when the mouse is hovering over it.
:focus
will be applied to the the object when it receives the focus.
:active
sets the style of the object when it is clicked or selected.
:invalid
Sets the style if the input is invalid (HTML5 validation).
:valid
Sets the style uif the input is valid (HTML5 validation).
:required
Sets the style if the input is required (HTML5 validation).
This tutorial will demonstrate the usage of pseudo classes with the form elements button and editbox.
As you may already know, styles can be useful to quickly apply the same style to multiple objects. You can create/edit styles in the Style Manager. For more information see also this related tutorial:
Using the Style Manager. However you can also use styles for interaction! For instance you can create hover effects without events or JavaScript by defining styles with pseudo-classes.
Pseudo-classes allow you to style elements as the user interacts with them providing visible feedback:
:hover
changes the appearance of the object when the mouse is hovering over it.
:focus
will be applied to the the object when it receives the focus.
:active
sets the style of the object when it is clicked or selected.
:invalid
Sets the style if the input is invalid (HTML5 validation).
:valid
Sets the style uif the input is valid (HTML5 validation).
:required
Sets the style if the input is required (HTML5 validation).
This tutorial will demonstrate the usage of pseudo classes with the form elements button and editbox.
Using the :hover pseudo class
Step 1
Open the Style Manager (Menu->Format->Styles) and add a new style. Name it 'rollover_button'. Configure the following values:
- border color: Black
- border style: Solid
- border width: 1
- background color: LightGray
You can change any of the other styles if you wish...
Click OK to save the style.
Step 1
Open the Style Manager (Menu->Format->Styles) and add a new style. Name it 'rollover_button'. Configure the following values:
- border color: Black
- border style: Solid
- border width: 1
- background color: LightGray
You can change any of the other styles if you wish...
Click OK to save the style.
Step 2
Select the new style in the Style Manager and click 'Copy'.
Change the name to: rollover_button:hover
Set the background color to Yellow
Click OK to save the style.
Now you have 2 new styles in the Style Manager: rollover_button and rollover_button:hover
Select the new style in the Style Manager and click 'Copy'.
Change the name to: rollover_button:hover
Set the background color to Yellow
Click OK to save the style.
Now you have 2 new styles in the Style Manager: rollover_button and rollover_button:hover
Step 3
Insert a button (from the Form tools) and select 'rollover_button' (not 'rollover_button:hover'!!!) in the Style properties.
Insert a button (from the Form tools) and select 'rollover_button' (not 'rollover_button:hover'!!!) in the Style properties.
Step 4
Preview the page and hover your mouse over the button.
You will notice that static button is now interactive!
Preview the page and hover your mouse over the button.
You will notice that static button is now interactive!
Using the :focus pseudo class
Now let's use the :focus pseudo class for an input field.
Step 5
Open the Style Manager and add a new style. Name it 'form_field'.
Use the following values:
- border color: Black
- border style: Solid
- border width: 1
- background color: White
Click OK to save the style.
Step 6
Select the new style in the Style Manager and click 'Copy'.
Change the name to: form_field:focus
Set the background color to Yellow
Click OK to save the style.
Now you have 2 new styles in the Style Manager: form_field and form_field:focus
Step 7
Insert an editbox. Select 'form_field' (not 'form_field:focus'!!!) in Style property.
Step 8
Preview the page and click inside the editbox.
You will notice that background color changes. If you set the focus to another element on the page then the background color will return to its original value.
Now let's use the :focus pseudo class for an input field.
Step 5
Open the Style Manager and add a new style. Name it 'form_field'.
Use the following values:
- border color: Black
- border style: Solid
- border width: 1
- background color: White
Click OK to save the style.
Step 6
Select the new style in the Style Manager and click 'Copy'.
Change the name to: form_field:focus
Set the background color to Yellow
Click OK to save the style.
Now you have 2 new styles in the Style Manager: form_field and form_field:focus
Step 7
Insert an editbox. Select 'form_field' (not 'form_field:focus'!!!) in Style property.
Step 8
Preview the page and click inside the editbox.
You will notice that background color changes. If you set the focus to another element on the page then the background color will return to its original value.
Using the :valid and :invalid pseudo classes
For the last example we are going to change the appereance of an input field based on the user input in combination with HTML5 form validation.
Note this requires a modern browser. It will not work in IE9 or older!
Step 9
Open the Style Manager and add a new style. Name it 'validation'.
Use the following values:
- border color: Black
- border style: Solid
- border width: 1
- background color: White
Click OK to save the style.
Step 10
Select the new style in the Style Manager and click 'Copy'.
Change the name to: validation:invalid
Set the background color to Red
Click OK to save the style.
Step 11
Select the new style in the Style Manager and click 'Copy'.
Change the name to: validation:valid
Set the background color to Green
Click OK to save the style.
Now you have 3 new styles in the Style Manager:
validation
validation:invalid
validation:valid
Step 12
Insert an edit box, set the type to 'email'
Select 'validation' in the Style property.
For the last example we are going to change the appereance of an input field based on the user input in combination with HTML5 form validation.
Note this requires a modern browser. It will not work in IE9 or older!
Step 9
Open the Style Manager and add a new style. Name it 'validation'.
Use the following values:
- border color: Black
- border style: Solid
- border width: 1
- background color: White
Click OK to save the style.
Step 10
Select the new style in the Style Manager and click 'Copy'.
Change the name to: validation:invalid
Set the background color to Red
Click OK to save the style.
Step 11
Select the new style in the Style Manager and click 'Copy'.
Change the name to: validation:valid
Set the background color to Green
Click OK to save the style.
Now you have 3 new styles in the Style Manager:
validation
validation:invalid
validation:valid
Step 12
Insert an edit box, set the type to 'email'
Select 'validation' in the Style property.
Step 14
Preview the page and enter an invalid email address. You will notice that background turns red.
Next enter a valid email address. The background should become green.
Of course you can define your own styles and use other properties for the different input states, like shadow or different border colors.
And because this is all standard CSS functionality you can use any pseudo clas that is supported by CSS.
Preview the page and enter an invalid email address. You will notice that background turns red.
Next enter a valid email address. The background should become green.
Of course you can define your own styles and use other properties for the different input states, like shadow or different border colors.
And because this is all standard CSS functionality you can use any pseudo clas that is supported by CSS.
Step 13
Click the button in 'Validation' property of the editbox.
Set mode to HTML5.
Set data type to Email address.
Click the button in 'Validation' property of the editbox.
Set mode to HTML5.
Set data type to Email address.
