Notes Javascript - Custom Controls
Building Custom Controls
Start by figuring out exactly what is needed.
Next consider which control is best suited to be modified to build what you need.
Define the states of the control.
Define its behaviour.
Custom Drop Down List
In our example, we will rebuild the <select> element. Here is the result we want to achieve:
Three States
Normal State
the page loads.
the control was active and the user clicks anywhere outside it.
the control was active and the user moves the focus to another control using the keyboard (e.g. the Tab key).
Active State
the user clicks on it or touches it on a touch screen.
the user hits the tab key and it gains focus.
the control was in its open state and the user clicks on it.
Open State
the control is in any other state than open and the user clicks on it.
Changing The Control's Value
The value changes when:
the user clicks on an option when the control is in the open state.
the user hits the up or down arrow keys when the control is in its active state.
The value does not change when:
the user hits the up arrow key when the first option is selected.
the user hits the down arrow key when the last option is selected.
How the control's options will behave:
When the control is opened, the selected option is highlighted
When the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state
Other Considerations
Tab Key In Open State
Up or Down Arrow In Open State
Escape Key
Defining the HTML Structure & Some Semantics
.widget select,
.no-widget .select {position: absolute;left: -5000em;height: 0;overflow: hidden;}
.select {position: relative;display: inline-block;}
.select.active,
.select:focus {box-shadow: 0 0 3px 1px #227755;outline: none;}
.select .optList {position: absolute;top: 100%;left: 0;}
.select .optList.hidden {max-height: 0;visibility: hidden;}
.select {
font-size:1.0rem;box-sizing:border-box;padding:0.1rem 2.5rem 0.2rem 0.5rem;width:10rem;
border:0.2rem solid #000;border-radius:0.4rem;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.45);
background: #fff;
}
.select .value {
display: inline-block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: top;}
.select:after {
content:"▼";position:absolute;z-index:1;
height:100%;width:2rem;top:0;right:0;padding-top:0.1rem;box-sizing:border-box;
text-align:center;border-left:0.2rem solid #000;border-radius: 0 0.1rem 0.1rem 0;
background-color:#57f;color:#fff;
}
.select .optList {
z-index:2;list-style:none;margin:0;padding:0;background:#f0f0f0;
border:0.2rem solid #000;border-top-width:0.1rem;border-radius:0 0 0.4rem 0.4rem;
box-shadow:0 0.2rem 0.4rem rgba(0, 0, 0, 0.4);box-sizing:border-box;
min-width:100%;max-height:10rem;overflow-y:auto;overflow-x:hidden;
}
.select .option {padding:0.2rem 0.3rem;}
.select .highlight {background:#000;color:#ffffff;}
<form class="no-widget">
<select id="myFruit" name="myFruit">
<option>Cherry</option>
<option>Lemon</option>
<option>Banana</option>
<option>Strawberry</option>
<option>Apple</option>
</select>
<div class="select" role="listbox">
<span class="value">Cherry</span>
<ul class="optList hidden" role="presentation">
<li class="option" role="option" aria-selected="true">Cherry</li>
<li class="option" role="option">Lemon</li>
<li class="option" role="option">Banana</li>
<li class="option" role="option">Strawberry</li>
<li class="option" role="option">Apple</li>
</ul>
</div>
</form>
HTML Structure
Class
Description
select
DIV wrapper for the drop down list control
value
SPAN element that holds the selected value
optList
UL element used to wrap the list items
option
LI elements that are the list items
Get Fruit Selected
Response
Masked Input
<input id="txtDate1" placeholder = "dd/mm/yyyy hh:mm" data-slots = "dmyh" />
<input id="txtPhone1" placeholder="+1 (___) ___-____" data-slots="_"/>
<input id="txtMac1" placeholder="XX:XX:XX:XX:XX:XX" data-slots="X" data-accept = "[\dA-H]" />
<input id="txtAlphaNum1" placeholder="__-__-__-____" data-slots="_" data-accept = "\w" size="13" />
<input id="txtCredit1" placeholder=".... .... .... ...." data-slots="." data-accept = "\d" size="19" />
<input id="txtCredit2" placeholder="**** **** **** ****" data-slots="*" data-accept = "\d" size="19" />
<input id="txtSsn1" placeholder="___-__-____" data-slots="_" data-accept = "\d"/>
document.addEventListener('DOMContentLoaded', () => {
...
for (const el of document.querySelectorAll("[placeholder][data-slots]")) {
const pattern = el.getAttribute("placeholder"),
slots = new Set(el.dataset.slots || "_"),
prev = (j => Array.from(pattern, (c,i) => slots.has(c)? j=i+1: j))(0),
first = [...pattern].findIndex(c => slots.has(c)),
accept = new RegExp(el.dataset.accept || "\\d", "g"),
clean = input => {
input = input.match(accept) || [];
return Array.from(pattern, c =>
input[0] === c || slots.has(c) ? input.shift() || c : c
);
},
format = () => {
const [i, j] = [el.selectionStart, el.selectionEnd].map(i => {
i = clean(el.value.slice(0, i)).findIndex(c => slots.has(c));
return i<0? prev[prev.length-1]: back? prev[i-1] || first: i;
});
el.value = clean(el.value).join``;
el.setSelectionRange(i, j);
back = false;
};
let back = false;
el.addEventListener("keydown", (e) => back = e.key === "Backspace");
el.addEventListener("input", format);
el.addEventListener("focus", format);
el.addEventListener("click", format);
el.addEventListener("blur", () => el.value === pattern && (el.value=""));
};
...
});
Check Boxes
These are done entirely with CSS
Slide One
<div class="slideOne">
<input type="checkbox" value="None" id="slideOne" name="check" checked />
<label for="slideOne"></label>
</div>
.slideOne {
width:50px;
height:10px;
background:#333;
margin:20px 0px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideOne label {
display:block;
width:16px;
height:16px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-ms-transition:all .4s ease;
transition:all .4s ease;
cursor:pointer;
position:absolute;
top:-3px;
left:-3px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.slideOne input[type=checkbox]:checked + label {left: 37px;}
The control consistes of three parts:
The outer div with the class slideOne
The checkbox input
The label
Here is the outer div with the class slideOne by itself:
CSS Breakdown For slideOne
CSS
Description
width:50px;
The element is 50 pixels wide
height:10px;
The element is 10 pixels high
background:#333;
The background color is #333
margin:20px 0px;
The margin is 20 pixels on top and bottom and 0 pixels on each side
border-radius:50px;
position: relative;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),
0px 1px 0px rgba(255,255,255,0.2);
Slide One
slideOne_2
For example this control has been scaled to make it more clear.
Slide Two
<h6>Slide Two</h6>
<div class="slideTwo">
<input type="checkbox" value="None" id="slideTwo" name="check" />
<label for="slideTwo"></label>
</div>
.slideTwo {
width:80px;
height:30px;
background:#333;
margin:20px 0px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
position:relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideTwo:after {
content:'';
position:absolute;
top:14px;
left:14px;
height:2px;
width:52px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #111;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideTwo label {
display:block;
width:22px;
height:22px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition: all .4s ease;
-ms-transition:all .4s ease;
transition:all .4s ease;
cursor:pointer;
position:absolute;
top:4px;
z-index:1;
left:4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.slideTwo label:after {
content:'';
position:absolute;
width:10px;
height:10px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
background:#333;
left:6px;
top:6px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
}
.slideTwo input[type=checkbox]:checked + label {left: 54px;}
.slideTwo input[type=checkbox]:checked + label:after {background: #00bf00;}
Slide Two
/* THE OUTER LONG ROUNDED BASE */
.slideTwo_2 {
position:relative;
width:160px;
height:60px;
background:#333;
margin:10px 0px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
/* THE MIDDLE TRACK */
.slideTwo_2:after {
position:absolute;
top:28px;
left:28px;
height:4px;
width:104px;
content:'';
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #111;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
/* THE OUTER BUTTON */
.slideTwo_2 label {
z-index:1;
display:block;
position:absolute;
top:8px;
left:8px;
width:44px;
height:44px;
cursor:pointer;
-webkit-border-radius:21px;
-moz-border-radius:21px;
border-radius:21px;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-ms-transition:all .4s ease;
transition:all .4s ease;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
/* THE INNER BUTTON */
.slideTwo_2 label:after {
content:'';
position:absolute;
left:7px;
top:7px;
width:30px;
height:30px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
background:#333;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
}
.slideTwo_2 input[type=checkbox]:checked + label {left: 108px;}
.slideTwo_2 input[type=checkbox]:checked + label:after {background: #00bf00;}
Slide Two
Slide Three
<div class="slideThree">
<input type="checkbox" value="None" id="slideThreeB" name="check" />
<label for="slideThreeB"></label>
</div>
.slideThree {
position:relative;
width:80px;
height:26px;
background:#555;
margin:20px 0px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideThree:after {
z-index:0;
position:absolute;
right:10px;
content:'OFF';
font:12px/26px Arial, sans-serif;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,0,0,.15);
color:#000;
}
.slideThree:before {
z-index:0;
position:absolute;
left:10px;
content:'ON';
font:12px/26px Arial, sans-serif;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,0,0,.5);
color:#00bf00;
}
/* -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); */
.slideThree label {
z-index:1;
position:absolute;
top:3px;
left:3px;
width:34px;
height:20px;
display:block;
cursor:pointer;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-ms-transition:all .4s ease;
transition:all .4s ease;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #999999 0%, #666666 40%, #333333 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.slideThree input[type=checkbox]:checked + label {left: 43px;}
Slide Three
/* THE OUTER LONG ROUNDED CORNER BASE */
.slideThree_2 {
position:relative;
width:160px;
height:52px;
background:#555;
margin:20px 0px;
-webkit-border-radius:26px;
-moz-border-radius:26px;
border-radius:26px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
/* OFF TEXT */
.slideThree_2:after {
z-index:0;
position:absolute;
right:20px;
content:'OFF';
font:24px/52px Arial, sans-serif;
font-weight:900;
text-shadow:1px 1px 0px rgba(0,0,0,.15);
color:#000;
}
/* ON TEXT */
.slideThree_2:before {
z-index:0;
position:absolute;
left:20px;
content:'ON';
font:24px/52px Arial, sans-serif;
font-weight:900;
text-shadow:1px 1px 0px rgba(0,0,0,.5);
color:#00bf00;
}
/* THE SLIDING BUTTON */
.slideThree_2 label {
z-index:1;
position:absolute;
top:6px;
left:6px;
width:68px;
height:40px;
display:block;
cursor:pointer;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-ms-transition:all .4s ease;
transition:all .4s ease;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #999999 0%, #666666 40%, #333333 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.slideThree_2 input[type=checkbox]:checked + label {left: 86px;}
Slide Three 2
The ::before & ::after Pseudo-Elements
<div class="testWrap">
<div class="testDiv">Test Div</div>
</div>
div.testWrap {
position:relative;
min-height:20rem;
background-color:#efefef;
margin:0rem;
border:1px solid #000;
padding:2rem;
}
.testDiv {
position:relative;
width:30rem;
height:3rem;
margin:5rem;
border:1px solid #000;
padding:0.5rem 1rem;
display:block;
background-color: #888;
color:#fff;
font-weight:900;
}
.testDiv::before {
position:relative;top:0rem;left:0rem;
color:#5f7;
font-weight:900;
content:'Before';
}
.testDiv::after {
position:relative;top:0rem;left:0rem;
color:#57f;
font-weight:900;
content:'After';
}
content
/* Keywords that cannot be combined with other values */
content: normal;
content: none;
/* <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);
/* alt text for generated content, added in the Level 3 specification */
content: url("http://www.example.com/test.png") / "This is the alt text";
/* <string> value */
content: "prefix";
/* list of content values */
content: "prefix" url("http://www.example.com/test.png");
content: "prefix" url("http://www.example.com/test.png") "suffix" /
"This is some alt text";
/* <counter> values, optionally with <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);
/* attr() value linked to the HTML attribute value */
content: attr(value string);
/* Language- and position-dependent keywords */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
/* Except for normal and none, several values can be used simultaneously */
content: open-quote counter(chapter_counter);
/* Global values */
content: inherit;
content: initial;
content: revert;
content: revert-layer;
content: unset;
Custom Bullet List
<ul class="atom_list">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
ul.atom_list {list-style:none;margin:0rem 0rem 2rem 0rem;border:0px none #555;padding:0px;}
ul.atom_list li:before {content: '\25C9';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list li {margin:0rem 0rem 0rem 1.5rem;border:0px none #555;padding:0.25rem 0rem 0.5rem 0rem;}
ul.atom_list li a:link {color:$blue;text-decoration:none;font-weight: 700;}
ul.atom_list li a:visited {color:$blue;text-decoration:none;font-weight: 700;}
ul.atom_list li a:hover {color:$blue;text-decoration:underline;font-weight: 900;}
ul.atom_list li a:active {color:$blue;text-decoration:none;font-weight: 700;}
// THE REMAINING CLASSES USE THE SAME STYLING EXCEPT FOR THE li:before SELECTOR
ul.atom_list2 li:before {content: '\25B6';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list3 li:before {content: '\25B2';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list4 li:before {content: '\25AC';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list5 li:before {content: '\25AD';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list6 li:before {content: '\25C0';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list7 li:before {content: '\25C8';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list8 li:before {content: '\25CD';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list9 li:before {content: '\269B';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list10 li:before {content: '\2714';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list11 li:before {content: '\25D8';padding:0px 5px 0px 0px;color:#57f;}
ul.atom_list12 li:before {content: '\25D9';padding:0px 5px 0px 0px;color:#57f;}
List 1
List item one
List item two
List item three
List 2
List item one
List item two
List item three
List 3
List item one
List item two
List item three
List 4
List item one
List item two
List item three
List 5
List item one
List item two
List item three
List 6
List item one
List item two
List item three
List 7
List item one
List item two
List item three
List 8
List item one
List item two
List item three
List 9
List item one
List item two
List item three
List 10
List item one
List item two
List item three
List 11
List item one
List item two
List item three
List 12
List item one
List item two
List item three
ul.custom_list1 {
position:relative;
margin:0rem 0rem 0rem 0rem;
border:1px none #000;
border-radius:8px;
padding:1rem;
background-color:#EEE;
list-style:none;
}
ul.custom_list1 li {
font-weight:900;
margin:0.2rem 0rem 0.2rem 0rem;
border:0px none #333;
border-radius:8px;
padding:0.5rem 0rem 0.5rem 2.0rem;
background-color:#ddd;
}
ul.custom_list1 li::before {
content:'';
position:absolute;
left:20px;
width:20px;
height:20px;
border:2px solid #000;
border-radius:10px;
background:#555;
margin:3px 0px 0px 0px;
padding:0rem 0rem 0rem 0rem;
}
ul.custom_list1 li::after {
content:'';
position:absolute;
left:20px;
width:8px;
height:8px;
border-radius:4px;
background:#7e7;
margin:9px 0px 0px 6px;
padding:0px;
}
List item one
List item two
List item three
List item one
List item two
List item three
List item one
List item two
List item three
Input With DataList
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
Choose a flavor:
Run Test Script
Response