Introduction
The Plug-in Stylesheet is used to apply a style to the Plug-in Settings page.
Download from the following link:
51-modern-default.css
.
Alert message
kintoneplugin-alert
Sample Image
Sample Usage
1
2
3
<div class ="kintoneplugin-alert" >
<p >caution !!</p >
</div >
Label
kintoneplugin-row
Sample Image
Sample Usage
1
<div class ="kintoneplugin-row" >row</div >
kintoneplugin-label
Sample Image
Sample Usage
1
<div class ="kintoneplugin-label" >label</div >
kintoneplugin-title
Sample Image
Sample Usage
1
<div class ="kintoneplugin-title" >title</div >
kintoneplugin-require
Sample Image
Sample Usage
1
2
3
<div class ="kintoneplugin-label" >require
<span class ="kintoneplugin-require" >*</span >
</div >
kintoneplugin-desc
Sample Image
Sample Usage
1
<div class ="kintoneplugin-desc" >description</div >
1
2
3
<div class ="kintoneplugin-input-outer" >
<input class ="kintoneplugin-input-text" type ="text" />
</div >
Check box
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class ="kintoneplugin-input-checkbox" >
<span class ="kintoneplugin-input-checkbox-item" >
<input id ="checkbox-0" checked ="checked" name ="checkbox" type ="checkbox" value ="0" />
<label for ="checkbox-0" >checkbox A</label >
</span >
</div >
<div class ="kintoneplugin-input-checkbox" >
<span class ="kintoneplugin-input-checkbox-item" >
<input id ="checkbox-1" name ="checkbox" type ="checkbox" value ="1" />
<label for ="checkbox-1" >checkbox B</label >
</span >
</div >
<div class ="kintoneplugin-input-checkbox" >
<span class ="kintoneplugin-input-checkbox-item" >
<input id ="checkbox-2" checked ="checked" disabled ="disabled" name ="checkbox" type ="checkbox" value ="2" />
<label for ="checkbox-2" >checkbox C</label >
</span >
</div >
<div class ="kintoneplugin-input-checkbox" >
<span class ="kintoneplugin-input-checkbox-item" >
<input id ="checkbox-3" disabled ="disabled" name ="checkbox" type ="checkbox" value ="3" />
<label for ="checkbox-3" >checkbox D</label >
</span >
</div >
Dropdown
kintoneplugin-dropdown-outer, kintoneplugin-dropdown, kintoneplugin-dropdown-selected
Sample Image
Sample Usage
1
2
3
4
5
6
7
<div class ="kintoneplugin-dropdown-outer" >
<div class ="kintoneplugin-dropdown" >
<div class ="kintoneplugin-dropdown-selected" >
<span class ="kintoneplugin-dropdown-selected-name" >drop down</span >
</div >
</div >
</div >
kintoneplugin-dropdown-list, kintoneplugin-dropdown-list-item, kintoneplugin-dropdown-list-item-selected
Sample Image
Sample Usage
1
2
3
4
5
6
7
8
9
10
11
<div class ="kintoneplugin-dropdown-list" >
<div class ="kintoneplugin-dropdown-list-item kintoneplugin-dropdown-list-item-selected" >
<span class ="kintoneplugin-dropdown-list-item-name" >option A</span >
</div >
<div class ="kintoneplugin-dropdown-list-item" >
<span class ="kintoneplugin-dropdown-list-item-name" >option B</span >
</div >
<div class ="kintoneplugin-dropdown-list-item" >
<span class ="kintoneplugin-dropdown-list-item-name" >option C</span >
</div >
</div >
kintoneplugin-select-outer, kintoneplugin-select
Sample Image
Sample Usage
1
2
3
4
5
6
7
8
9
<div class ="kintoneplugin-select-outer" >
<div class ="kintoneplugin-select" >
<select >
<option >select A</option >
<option >select B</option >
<option >select C</option >
</select >
</div >
</div >
1
2
3
4
5
6
7
8
9
10
<div class ="kintoneplugin-input-radio" >
<span class ="kintoneplugin-input-radio-item" >
<input id ="radio-0" checked ="checked" name ="radio" type ="radio" value ="0" />
<label for ="radio-0" >radio A</label >
</span >
<span class ="kintoneplugin-input-radio-item" >
<input id ="radio-1" name ="radio" type ="radio" value ="1" />
<label for ="radio-1" >radio B</label >
</span >
</div >
Table
kintoneplugin-table, kintoneplugin-table-th, kintoneplugin-table-th-blankspace, kintoneplugin-table-td-control, kintoneplugin-table-td-control-value, kintoneplugin-table-td-operation, kintoneplugin-button-add-row-image, kintoneplugin-button-remove-row-image
Sample Image
Sample Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table class ="kintoneplugin-table" >
<thead >
<tr >
<th class ="kintoneplugin-table-th" ><span class ="title" >table header</span ></th >
<th class ="kintoneplugin-table-th-blankspace" ></th >
</tr >
</thead >
<tbody >
<tr >
<td >
<div class ="kintoneplugin-table-td-control" >
<div class ="kintoneplugin-table-td-control-value" >
<div class ="kintoneplugin-input-outer" >
<input class ="kintoneplugin-input-text" type ="text" >
</div >
</div >
</div >
</td >
<td class ="kintoneplugin-table-td-operation" >
<button type ="button" class ="kintoneplugin-button-add-row-image" title ="Add row" ></button >
<button type ="button" class ="kintoneplugin-button-remove-row-image" title ="Delete this row" ></button >
</td >
</tr >
</tbody >
</table >
1
<button class ="kintoneplugin-button-normal" >button</button >
1
<button class ="kintoneplugin-button-disabled" >disabled button</button >
1
<button class ="kintoneplugin-button-dialog-ok" >OK</button >
1
<button class ="kintoneplugin-button-dialog-cancel" >CANCEL</button >
Note
Layouts and styles may look out of place for any future updates that include a change in design. Please note that we cannot assure that the exact same style will be kept after these updates.