Forms 204
Using CSS To Style Your Form
Shawn Li, Laserfiche
1
Presenter
SHAWN LI
Software Engineer
Laserfiche
2
Audience
• Forms designers and
developers
• Users interested in exploring
possible customization using
Laserfiche Forms
3
Agenda
• Themes tab
• CSS basics
• How to use CSS in Forms
• Animated focus effect
4
Themes Tab
5
Themes Tab
Default Themes
6
CSS Basics
10
CSS Basics
Definition
Wikipedia:
Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation of a
document written in a markup language like HTML.
11
CSS Basics
Definition
My version:
Cascading Style Sheets (CSS) is a language that
lets you set the appearance of elements on your
page.
12
CSS Basics
2 Steps
Step 1: Select the element(s)
Step 2: Set the appearance of the element(s)
13
CSS Basics
2 Steps
Step 1: Select the element(s)
Selector
Step 2: Set the appearance of the element(s)
Property: Value(s)
14
CSS Basics
2 Steps
“Select (all of the)
paragraph elements on
the page and set their
color to be red”
15
CSS Basics
2 Steps
“Select (all of the)
paragraph elements on
the page and set their
color to be red”
16
CSS Basics
2 Steps
“Select (all of the)
paragraph elements on
the page and set their
color to be red”
Rule Set
17
CSS Basics
2 Steps
“Select (all of the)
paragraph elements on
the page and set their
color to be red”
18
CSS Basics
Selector
Different types
of selectors
19
CSS Basics
Selector
Different types
of selectors
20
CSS Basics
Selector
Different types
of selectors
21
CSS Basics
Selector
Different types
of selectors
22
CSS Basics
Selector
Different types
of selectors
23
CSS Basics
Selector
Different types
of selectors
24
CSS Basics
Selector
Different types
of selectors
We will only be
covering the first
four selectors. You
can learn more
about other
selectors at:
https://developer.mozilla.org/
en-US/docs/Learn/Getting_sta
rted_with_the_web/
CSS_basics
25
CSS Basics Element Selector
26
CSS Basics ID Selector
27
CSS Basics ID Selector
28
CSS Basics ID Selector
29
CSS Basics Class Selector
30
CSS Basics Class Selector
31
CSS Basics Class Selector
32
CSS Basics Class Selector
33
CSS Basics Class Selector
34
CSS Basics Class Selector
35
CSS Basics Class Selector
36
CSS Basics ID VS Class
ID: Class:
• One HTML Element can • One class can be assigned to
have at most one id; multiple HTML elements, so
that one rule sets can be
• One id can be given to shared by multiple HTML
at most one html elements.
element.
• One HTML Element can have
• ID should be treated as multiple classes, so that one
the unique identifier for HTML element can get styles
a single HTML element from multiple rule sets.
on the whole page.
37
CSS Basics Attribute Selector
38
CSS Basics Attribute Selector
39
CSS Basics Attribute Selector
40
CSS Basics Attribute Selector
41
CSS Basics Attribute Selector
42
CSS Basics Attribute Selector
43
CSS Basics Compounded selector
44
CSS Basics Compounded selector
<input type=“text” class=“large”>
<input type=“submit” class=“large”>
<input type=“text” class=“small”>
45
CSS Basics Compounded selector
<input type=“text” class=“large”>
<input type=“submit” class=“large”>
<input type=“text” class=“small”>
46
CSS Basics Compounded selector
<input type=“text” class=“large”> input {
<input type=“submit” class=“large”> color: red
<input type=“text” class=“small”> }
47
CSS Basics Compounded selector
<input type=“text” class=“large”> .large {
<input type=“submit” class=“large”> color: red
<input type=“text” class=“small”> }
48
CSS Basics Compounded selector
<input type=“text” class=“large”> [type=“text”] {
<input type=“submit” class=“large”> color: red
<input type=“text” class=“small”> }
49
CSS Basics Compounded selector
<input type=“text” class=“large”> .large[type=“text”] {
<input type=“submit” class=“large”> color: red
<input type=“text” class=“small”> }
50
CSS Basics Compounded selector
<input type=“text” class=“large”> .large[type=“text”] {
<input type=“submit” class=“large”> color: red
<input type=“text” class=“small”> }
“Select the elements that
have a class of large AND
a type of text”
51
CSS Basics Compounded selector
<input type=“text” class=“large”> .large[type=“text”] {
<input type=“submit” class=“large”> color: red
<input type=“text” class=“small”> }
<div type=“text” class=“large”></div> “Select the elements
that have a class of
large and a type of text”
52
CSS Basics Compounded selector
<input type=“text” class=“large”> input.large[type=“text”] {
<input type=“submit” class=“large”> color: red
<input type=“text” class=“small”> }
<div type=“text” class=“large”></div>
“Select the input elements
that have a class of large
AND a type of text ”
53
CSS Basics
Combine Multiple Selectors / Compounded Selectors
54
CSS Basics
Combine Multiple Selectors / Compounded Selectors
55
CSS Basics
Combine Multiple Selectors / Compounded Selectors
56
CSS Basics
Combine Multiple Selectors / Compounded Selectors
57
CSS Basics
Combine Multiple Selectors / Compounded Selectors
58
We will only be covering the first three
CSS Basics combinators. You can learn more about other
combinators at:
Combine Multiple Selectors https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to
_CSS/Combinators_and_multiple_selectors
59
CSS Basics Selector List
60
CSS Basics Selector List
61
CSS Basics Selector List
62
CSS Basics Descendant Combinator
63
CSS Basics Descendant Combinator
<div id=“blue”>
<div id=“green”>
<div id=“red”>
</div>
</div>
<div id=“orange”>
</div>
</div>
64
CSS Basics Descendant Combinator
Descendants of each div
<div id=“blue”>
<div id=“green”>
blue: green, red, orange
<div id=“red”>
green: red
</div>
red: No descendant
</div>
orange: No descendant
<div id=“orange”>
</div>
</div>
65
CSS Basics Descendant Combinator
66
CSS Basics Descendant Combinator
67
CSS Basics Descendant Combinator
68
CSS Basics Descendant Combinator
69
CSS Basics Descendant Combinator
70
CSS Basics Descendant Combinator
71
CSS Basics Descendant Combinator
72
CSS Basics Descendant Combinator
Element with the following
properties will be selected:
1. It has a class of apple
2. It is a descendant of the element
that has a class of grandParent
73
CSS Basics Descendant Combinator
Element with the following
properties will be selected:
1. It has a class of apple
2. It is a descendant of the element
that has a class of grandParent
74
CSS Basics Descendant Combinator
https://developer.mozilla.org/en-
US/docs/Web/CSS/Specificity
75
CSS Basics Child Combinator
76
CSS Basics Child Combinator
Descendants of each div
<div id=“blue”>
<div id=“green”>
blue: green, red, orange
<div id=“red”>
green: red
</div>
red: No descendant
</div>
orange: No descendant
<div id=“orange”>
</div> Children of each div
</div>
blue: green, orange
green: red
red: No descendant
orange: No descendant
77
CSS Basics Child Combinator
78
CSS Basics Child Combinator
79
CSS Basics Child Combinator
80
CSS Basics Child Combinator
81
Questions?
82
Use CSS to
style form
83
84
85
86
87
Use CSS to style form
Use browser dev tool
88
Use CSS to style form
Use browser dev tool
89
Use CSS to style form
Use browser dev tool
90
Use CSS to style form
91
Use CSS to style form
1. Change width and height of input box
92
Use CSS to style form
1. Change width and height of input box
93
Use CSS to style form
1. Change width and height of input box
Step1: Find target
element’s class or id using
browser dev tool
94
Use CSS to style form
1. Change width and height of input box
Step2: Copy and paste
target element’s class or
id into CSS editor, use it as
the selector
95
Use CSS to style form
1. Change width and height of input box
Step3: Fill in the properties
and values that will meet
our requirements
96
Use CSS to style form
1. Change width and height of input box
Step4: Click the save
button and preview to see
the effect
97
Use CSS to style form
2. Display fields side by side
98
Use CSS to style form
2. Display fields side by side
99
Use CSS to style form
2. Display fields side by side
100
Use CSS to style form
2. Display fields side by side
Step1: Add a new CSS
class to the fields, it will
add the class to the
parent <li> element which
wraps both the label and
the input box
101
Use CSS to style form
2. Display fields side by side
Step1: Add a new CSS
class to the fields, it will
add the class to the
parent <li> element which
wraps both the label and
the input box
102
Use CSS to style form
2. Display fields side by side
Step1: Add a new CSS
class to the fields, it will
add the class to the
parent <li> element which
wraps both the label and
the input box
103
Use CSS to style form
2. Display fields side by side
Step1: Add a new CSS
class to the fields, it will
add the class to the
parent <li> element which
wraps both the label and
the input box
104
Use CSS to style form
2. Display fields side by side
Step1: Add a new CSS
class to the fields, it will
add the class to the
parent <li> element which
wraps both the label and
the input box
105
Use CSS to style form
2. Display fields side by side
Step1: Add a new CSS
class to the fields, it will
add the class to the
parent <li> element which
wraps both the label and
the input box
106
Use CSS to style form
2. Display fields side by side
Step1: Add a new CSS
class to the fields, it will
add the class to the
parent <li> element which
wraps both the label and
the input box
107
Use CSS to style form
2. Display fields side by side
Step2: Add properties to
the newly added CSS class
108
Use CSS to style form
2. Display fields side by side
Step3: Click save and
preview to see the effect
109
Use CSS to style form
2. Display fields side by side
Step3: Click save and
preview to see the effect
The two inputs are a bit
short, and there are some
extra space after them, so
it would be better we can
make the inputs longer
110
Use CSS to style form
2. Display fields side by side
Step4: Inspect on the
input to explore its
properties
111
Use CSS to style form
2. Display fields side by side
Step4: Inspect on the
input to explore its
properties
112
Use CSS to style form
2. Display fields side by side
Step4: Inspect on the
input to explore its
properties
113
Use CSS to style form
2. Display fields side by side
114
Use CSS to style form
2. Display fields side by side
115
Use CSS to style form
2. Display fields side by side
116
Use CSS to style form
2. Display fields side by side
117
Use CSS to style form
2. Display fields side by side
118
Use CSS to style form
2. Display fields side by side
119
Use CSS to style form
2. Display fields side by side
120
Use CSS to style form
CSS display property
121
Use CSS to style form
3. Center the submit button
122
Use CSS to style form
3. Center the submit button
Step1: Check its html
structure and what
existing CSS classes it has
123
Use CSS to style form
3. Center the submit button
Step1: Check its html
structure and what
existing CSS classes it has
124
Use CSS to style form
3. Center the submit button
Step1: Check its html
structure and what
existing CSS classes it has
125
Use CSS to style form
3. Center the submit button
Step1: Check its html
structure and what
existing CSS classes it has
126
Use CSS to style form
3. Center the submit button
Step1: Check its html
structure and what
existing CSS classes it has
127
Use CSS to style form
3. Center the submit button
Hover over on the HTML
element, we can see that
it does not take up the
whole row
128
Use CSS to style form
3. Center the submit button
129
Use CSS to style form
3. Center the submit button
Now it does take up the
whole row
130
Use CSS to style form
3. Center the submit button
Step2: Apply the
properties to the
corresponding css classes
131
Use CSS to style form
3. Center the submit button
Step3: Click save and
preview to see the effect
132
Use CSS to style form
3. Center the submit button
Step3: Click save and
preview to see the effect
It’s CENTERED!~~
133
Use CSS to style form
134
Use CSS to style form
135
Questions?
136
Animated focus
effect
137
Animated focus effect
138
Animated focus effect
139
Animated focus effect
140
Animated focus effect
141
Animated focus effect
142
Animated focus effect
143
Animated focus effect
144
Animated focus effect
145
Animated focus effect
146
Animated focus effect
147
Animated focus effect
148
Animated focus effect
.focus-border:before
.focus-border:after
.focus-border i:before
.focus-border i:after
152
Animated focus effect
.focus-border:before
.focus-border i:before .focus-border i:after
.focus-border:after
154
Animated focus effect
#Field14 {
…
}
#Field14:focus {
…
}
158
Animated focus effect
159
Animated focus effect
160
Animated focus effect
161
Animated focus effect
162
Animated focus effect
163
Animated focus effect
172
Animated focus effect
173
Questions?
174
Online Course Survey
Rate your classes and share your ideas
Download the Empower App
Access the online survey
through the course selector
on the Empower app or on
empower.laserfiche.com
175
Recommended Classes
Developer 303 Forms 202 Forms 301
Scripting and Best Practices in Calculations,
Customization in Process Design Advanced Events
Laserfiche Forms and Intro to
Customization
176
Next Steps
support.laserfiche.com answers.laserfiche.com Information Center
177
Thank you
178
