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 control is in its normal state when:
  • 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 control is in its active state when:
  • 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 its open state when:
  • 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

 

Cherry Lemon Banana Strawberry Apple

Cherry

• Cherry
• Lemon
• Banana
• Strawberry
• Apple

 

 
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="")); }; ... });

Date Time:
Telephone:
MAC Adress:
Alphanumeric:
Credit Card:
Credit Card:
SSN:

 

 

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;}

 

 

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; }

 

 

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