cs16.css

Button

- - + +

- +

- + -

<button class="cs-btn">Button</button>
-<button disabled class="cs-btn">Disabled</button>

<button>Button</button>
+<button disabled>Disabled</button>

Hr

- +

- + -

<hr class="cs-hr" />

<hr />

Checkbox

- Checkbox + Checkbox

+ + + Checkbox 2 +

- +

- - -

<div class="cs-checkbox">
-  <input id="checkbox" type="checkbox" />
-  <label class="cs-checkbox__label" for="checkbox">Checkbox</label>
-</div>

+ + +

<div style="position: relative">
+  <input id="checkbox" type="checkbox" />
+  <label for="checkbox">Checkbox</label>
+</div>
+<label>
+  <input id="checkbox" type="checkbox" />
+  Checkbox 2
+</label>

Input

- - First name + + + First name +

- - + +

- +

- + -

<input class="cs-input" id="input" type="input" />
-<label class="cs-input__label" for="input">First name</label>
+            <label for="input">
+  <input id="input" type="input" />
+  First name
+</label>
 
-<br />
-<br />
+<br />
+<br />
 
-<input type="text" value="John Doe" class="cs-input" />
-<input type="text" disabled value="disabled" class="cs-input" />
+<input type="text" value="John Doe" />
+<input type="text" disabled value="disabled" />

Select

- Choose a car: - + + Choose a train: + +

- +

- - -

<label class="cs-select__label" for="cars">Choose a car:</label>
-<select class="cs-select" name="cars" id="cars">
-  <option value="volvo">Volvo</option>
-  <option value="saab">Saab</option>
-  <option value="opel">Opel</option>
-  <option value="audi">Audi</option>
-</select>

+ + +

<label>
+  Choose a train:
+  <select name="trains">
+    <option value="smile">Stadler SMILE</option>
+    <option value="desiro">Siemens Desiro</option>
+    <option value="twindexx-swiss-express">
+      Bombadier TWINDEXX Swiss Express
+    </option>
+    <option value="etr-610">Alstom ETR 610</option>
+  </select>
+</label>

Radio Group

What is your favorite wild animal?

@@ -200,14 +247,14 @@

- +

<fieldset class="cs-fieldset">
   <legend>What is your favorite wild animal?</legend>
-  <div class="radio-wrapper">
+  <div>
     <input type="radio" name="animal" id="elephant" />
     <label for="elephant">Elephant</label>
   </div>
@@ -220,6 +267,7 @@
     <label for="cheetah">Cheetah</label>
   </div>
   <div class="radio-wrapper">
+          referrerpolicy="noreferrer noopener"
     <input type="radio" name="animal" id="giraffe" />
     <label for="giraffe">Giraffe</label>
   </div>
@@ -241,10 +289,10 @@


 
         
-          
+          
 
           
-            
+            
 
             <div class="cs-slider">
   <div class="value">
@@ -264,19 +312,18 @@
         
           
-          
+          
             
               
                 
                   
                   Options
                 
-                
+                
               
               
                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
@@ -288,36 +335,35 @@
                 saepe, sed repudiandae!
               
               
-                
-                
-                
+                
+                
+                
               
             
           
         
 
         
-          
+          
 
           
-            
+            
 
             <section>
   <button
     type="button"
-    class="cs-btn"
-    onclick="document.querySelector('.cs-dialog').showModal();"
+    onclick="document.querySelector('dialog').showModal();"
   >
     Open dialog
   </button>
-  <dialog class="cs-dialog">
+  <dialog>
     <form method="dialog">
       <div class="heading">
         <div class="wrapper">
           <div class="icon"></div>
           <p class="text">Options</p>
         </div>
-        <button class="cs-btn close"></button>
+        <button class="close"></button>
       </div>
       <div class="content">
         Lorem ipsum dolor sit amet consectetur adipisicing elit.
@@ -329,9 +375,9 @@
         saepe, sed repudiandae!
       </div>
       <menu class="footer-btns">
-        <button class="cs-btn">OK</button>
-        <button class="cs-btn">Cancel</button>
-        <button class="cs-btn">Apply</button>
+        <buttonOK</button>
+        <buttonCancel</button>
+        <buttonApply</button>
       </menu>
     </form>
   </dialog>
@@ -373,10 +419,10 @@
         

 
         
-          
+          
 
           
-            
+            
 
             <div class="cs-tooltip">
   Right
@@ -416,16 +462,18 @@
         
           
         
+        
 
         
-          
+          
 
           
-            
+            
 
             <div class="cs-progress-bar">
   <div style="width: 50%" class="bars"></div>
-</div>
+</div>
+<progress value="1" min="0" max="3"></progress>
           
         
       

@@ -473,10 +521,10 @@
         

 
         
-          
+          
 
           
-            
+            
 
             <div class="cs-tabs">
   <input
@@ -524,7 +572,13 @@
 
     
       Released under MIT License. Made by
-      Samuel.
+      Samuel. Modified by
+      memdmp.
     
 
     
-- 
cgit v1.2.3

cs16.css

cs16-defaults.css

Installation

Button

Hr

Checkbox

Input

Select

Radio Group