A Pen by jakob-e

Thumbnail
This awesome code was written by jakob-e, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jakob-e ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <a href="#">FOOOO</a>

<link href='https://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
  
  <!--
<input type="radio" name="radio" id="rb1" />
<input type="radio" name="radio" id="rb2" />
<input type="radio" name="radio" id="rb3" />

<hr/>

<input type="checkbox" name="check" id="cb1" />
<input type="checkbox" name="check" id="cb2" />
<input type="checkbox" name="check" id="cb3" />
<hr>

<select><option>Selectbox value</option>
<option>Selectbox value</option>
  <option>Selectbox value</option>
  <option>Selectbox value</option>
</select>
  
  
  <hr>
    -->
<fieldset> 
  

  <output>Log</output>  
  <pre>
   yellow     = default background
   magenta    = default border
   darkblue   = checked background
   lime       = active  (mouse down)
   cyan       = focus   (tab) 
  
</pre>  
<hr>
<div class="ui">
    <input type="text" />
</div>  
<hr>
<div class="ui">    
  <input type="radio" name="radio1" id="rb11" />
  <div data-ui=""></div>  
</div>    
<div class="ui">    
  <input type="radio" name="radio1" id="rb12" />
  <div data-ui=""></div>  
</div>  
<div class="ui">    
  <input type="radio" name="radio1" id="rb13" />
  <div data-ui=""></div> 
</div>  

<hr>
  <p>Wrapped in labels</p>
<label> Radio 2.1
<div class="ui">    
  <input type="radio" name="radio2" id="rb21" checked/>
  <div data-ui=""></div>  
</div>    
</label>
<label> Radio 2.2  
  <div class="ui">    
    <input type="radio" name="radio2" id="rb22" />
    <div data-ui=""></div> 
</div>  
</label>  
<label> Radio 2.3  
<div class="ui">    
  <input type="radio" name="radio2" id="rb23" />
  <div data-ui=""></div> 
</div>  
</label>  
<hr>
  <p>Disabled</p>
<div class="ui">    
  <input type="radio" name="radio3" id="rb31" disabled checked/>
  <div data-ui=""></div>  
</div>    
<div class="ui">    
  <input type="radio" name="radio3" id="rb32" disabled checked/>
  <div data-ui=""></div>  
</div>  
<div class="ui">    
  <input type="radio" name="radio3" id="rb33" disabled />
  <div data-ui=""></div> 
</div>   
<hr>  
<div class="ui">    
  <input type="checkbox" name="check" id="cb1" />
  <div data-ui=""></div>  
</div>    
<div class="ui">    
  <input type="checkbox" name="check" id="cb2" />
  <div data-ui=""></div>  
</div>  
<div class="ui">    
  <input type="checkbox" name="check" id="cb3" />
  <div data-ui=""></div> 
</div>    
  

  </fieldset>
  

/*Downloaded from https://www.codeseek.co/jakob-e/a-pen-by-jakob-e-gqsDj */
    @import "compass/css3";

a:active { color:gold; }
a:focus { color:magenta; }


html {background:#282828;}
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  outline:none;
 }
* { color:#fff; }
p,label,output {font:14px Arial; }  

%round{
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
//background-clip: padding-box;
}
%rounded{
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
//background-clip: padding-box;
}


$selector-fix:true;
fieldset {position:relative;border:0;width:500px; margin:0 auto}
output { 
  display:block;position:absolute; right:0; top:0; width:180px;padding:20px;color:#000;background:#fff;}


  // Colors  
  $unchecked:#fff;  // --> :empty, not(:checked) 
  $checked:#005284; // --> not(:empty), :checked
   
  $enabled:orange;
  $disabled:#666;

  $hover:magenta;
  $focus:cyan;
  $active:lime;

[type=text]{
  color:#000;
  background-color:$unchecked;
  border:3px solid $enabled;
 // ----------------------------------
  // Not Empty
  &:enabled { 
     background-color:$unchecked;
     border-color:$enabled;
  }
  &:enabled:hover { 
     background-color:$unchecked;
     border-color:$hover;
  }
  &:enabled:focus  { 
     background-color:$unchecked;
     border-color:$focus;
  }
  &:enabled:active { 
     background-color:$unchecked;
     border-color:$active;
  }
}

.active { background:#f0f; } 
.ui{ 
  margin:5px 0; padding:0;   
  background:transparant;
  
  // Ensure sizing to data-ui
  display:table;
  // Keep content relative
  position:relative;
  
  // Hide input
  // Size to fit 
  // Position above [data-ui]
  & [type=radio], & [type=checkbox] { 
   position:absolute;
   width:100%;
   height:100%;
   -webkit-appearance: none;
      -moz-appearance: none; 
           appearance: none; 
    border:0;margin:0;padding:0;opacity:0;
    z-index:100; // Place above data-ui    
  }  
  & input:enabled {cursor:pointer;}
  
  // Radio
  [type=radio] ~ [data-ui]{
    @extend %round;
    width:30px;
    height:30px;
    background-color:yellow;
    border:3px solid magenta;
    cursor:pointer;
  }
  // Checkbox
  [type=checkbox] ~ [data-ui]{
    @extend %rounded;
    width:30px;
    height:30px;
    background-color:yellow;
    border:3px solid magenta;
    cursor:pointer;
  }

  
  
  @if($selector-fix==false){
  // ---------------------------------  
  // Enabled
  & input:enabled ~ [data-ui]{
     background-color:$unchecked;
     border-color:$enabled;
     &:after { content:'input:enabled'; margin-left:50px;}
  }
  & input:enabled:checked ~ [data-ui]{
     background-color:$checked;
     border-color:$enabled;
     &:after { content:'input:enabled:checked '; margin-left:50px;}
  }
  // ---------------------------------
  // Hover   
  & input:enabled:hover ~ [data-ui]{
     background-color:$unchecked;
     border-color:$hover;
     &:after { content:'input:enabled:hover'; margin-left:50px;}
  }
  & input:enabled:checked:hover ~ [data-ui]{
     background-color:$checked;
     border-color:$hover;
     &:after { content:'input:enabled:checked:hover'; margin-left:50px;}
  }
  // ---------------------------------
  // Focus   
  & input:enabled:focus ~ [data-ui]{
     background-color:$unchecked;
     border-color:$focus;
     &:after { content:'input:enabled:focus'; margin-left:50px;}
  }
  & input:enabled:checked:focus ~ [data-ui]{
     background-color:$checked;
     border-color:$focus;
     &:after { content:'input:enabled:checked:focus'; margin-left:50px;}
  }  
  & input:enabled:hover:focus ~ [data-ui]{
     background-color:$unchecked;
     border-color:$focus;
     &:after { content:'input:enabled:hover:focus'; margin-left:50px;}
  }
  & input:enabled:checked:hover:focus ~ [data-ui]{
     background-color:$checked;
     border-color:$focus;
     &:after { content:'input:enabled:checked:hover:focus'; margin-left:50px;}
  }    
  // ---------------------------------  
  // Active   
  & input:enabled:active ~ [data-ui]{
     background-color:$unchecked;
     border-color:$active;
     &:after { content:'input:enabled:active'; margin-left:50px;}
  }
  & input:enabled:checked:active ~ [data-ui]{
     background-color:$checked;
     border-color:$active;
     &:after { content:'input:enabled:checked:active'; margin-left:50px;}
  }  
  & input:enabled:hover:active ~ [data-ui]{
     background-color:$unchecked;
     border-color:$active;
     &:after { content:'input:enabled:hover:active'; margin-left:50px;}
  }
  & input:enabled:checked:hover:active ~ [data-ui]{
     background-color:$checked;
     border-color:$active;
     &:after { content:'input:enabled:checked:hover:active'; margin-left:50px;}
  } 
  // ---------------------------------  
  // Disabled states
  & input:disabled ~ [data-ui]{
     background-color:lightgray;
     border-color:gray;
     &:after { content:'input:disabled'; margin-left:50px;}
  }  
  & input:disabled:checked ~ [data-ui]{
     background-color:#666;
     &:after { content:'input:checked:disabled'; margin-left:50px;}
  } 
} @else {
  // ---------------------------------  
  // Enabled
  & input:enabled ~ [data-ui]{
     background-color:$unchecked;
     border-color:$enabled;
     &:after { content:'input:enabled'; margin-left:50px;}
  }
  & input:enabled:checked ~ [data-ui]{
     background-color:$checked;
     border-color:$enabled;
     &:after { content:'input:enabled:checked '; margin-left:50px;}
  }
  // ---------------------------------
  // Hover   
  & input:enabled:hover ~ [data-ui]{
     background-color:$unchecked;
     border-color:$hover;
     &:after { content:'input:enabled:hover'; margin-left:50px;}
  }
  & input:enabled:checked:hover ~ [data-ui]{
     background-color:$checked;
     border-color:$hover;
     &:after { content:'input:enabled:checked:hover'; margin-left:50px;}
  }
  // ---------------------------------
  // Focus   
  & input.focus:enabled ~ [data-ui]{
     background-color:$unchecked;
     border-color:$focus;
     &:after { content:'input:enabled:focus'; margin-left:50px;}
  }
  & input.focus:enabled:checked ~ [data-ui]{
     background-color:$checked;
     border-color:$focus;
     &:after { content:'input:enabled:checked:focus'; margin-left:50px;}
  }  
  & input.focus:enabled:hover ~ [data-ui]{
     background-color:$unchecked;
     border-color:$focus;
     &:after { content:'input:enabled:hover:focus'; margin-left:50px;}
  }
  & input.focus:enabled:checked:hover ~ [data-ui]{
     background-color:$checked;
     border-color:$focus;
     &:after { content:'input:enabled:checked:hover:focus'; margin-left:50px;}
  }    
  // ---------------------------------  
  // Active   
  & input.active:enabled ~ [data-ui]{
     background-color:$unchecked;
     border-color:$active;
     &:after { content:'input:enabled:active'; margin-left:50px;}
  }
  & input.active:enabled:checked ~ [data-ui]{
     background-color:$checked;
     border-color:$active;
     &:after { content:'input:enabled:checked:active'; margin-left:50px;}
  }  
  & input.active:enabled:hover ~ [data-ui]{
     background-color:$unchecked;
     border-color:$active;
     &:after { content:'input:enabled:hover:active'; margin-left:50px;}
  }
  & input.active:enabled:checked:hover ~ [data-ui]{
     background-color:$checked;
     border-color:$active;
     &:after { content:'input:enabled:checked:hover:active'; margin-left:50px;}
  } 
  // ---------------------------------  
  // Disabled states
  & input:disabled ~ [data-ui]{
     background-color:lightgray;
     border-color:gray;
     &:after { content:'input:disabled'; margin-left:50px;}
  }  
  & input:disabled:checked ~ [data-ui]{
     background-color:#666;
     &:after { content:'input:checked:disabled'; margin-left:50px;}
  }   
 }



}

// Findings 
// Active does not work in Opera
// FF will show active
// Chrome will show hover or checked
//
// Checked overrules active and focus when adding focus script
// If not focus will only occur when tabbing - Hover works
//
// Use enabled to prevent disabled states to act on
// focus, active and hover (makes no sense)
// 
// IE8 - OMG!!!!


// ===========================================
// wrap         .ui or .ui-class (non-state)
//
// UI
// button       [data-ui]
// input        input/textarea/select
// icon         [data-ui]:before
// label        [data-ui]:after
//
// Info 
// required     [data-ui-info]:before
// placeholder  [data-ui-info]:after
// ===========================================

 // Default states
/*  & input:enabled:hover ~ [data-ui]{
     background-color:orange;
     border-color:brown;
  }  
  & input:enabled:active ~ [data-ui]{
     border-color:lime;
  } 
  & input:enabled:focus ~ [data-ui]{
     border-color:cyan;
  }  
  
  // Checked states
  & input:enabled:checked ~ [data-ui]{
     background-color:darkblue;
     border-color:gold;
  }
  & input:enabled:checked:hover ~ [data-ui]{
     background-color:lightblue;
     border-color:darkgray;
  }    
  & input:enabled:checked:active ~ [data-ui]{
     border-color:lime;
  }  
  & input:enabled:checked:focus ~ [data-ui]{
     border-color:cyan;
  }    
  
  
  
  // Disabled states
  & input:disabled ~ [data-ui]{
     background-color:lightgray;
     border-color:gray;
  }  
  & input:disabled:checked ~ [data-ui]{
     background-color:#666;
  } */



// OLD STUFF
/*

// Radiobutton
[type=radio]{
  display:block;
  width:30px;
  height:30px;
  
  background:#f0f;
  border:2px solid transparent;
  
  cursor:pointer;
  
  -webkit-appearance: none;
     -moz-appearance: none; 
          appearance: none; 
 
  
  // FF
  
  // IE 8
  
  @extend %round;
  &:focus,&:active {
    border-color:cyan;
  }
  &:checked {
    background-color:#950dd9;
  }
  
  
  
}

// Checkbox
[type=checkbox]{
  display:block;
  width:30px;
  height:30px;
  
  background-color:#f0f;
  border:2px solid #f0f;
  cursor:pointer;
  
  -webkit-appearance: none;
     -moz-appearance: none; 
          appearance: none; 
  
  // FF
  
  // IE 8
  
  @extend %rounded;
  &:hover {
    background-color:pink;
  }  
  &:checked {
    background-color:#950dd9;
    border-color:#950dd9;
  }  
  &:checked:hover {
    background-color:#6d328a;
  }
  &:focus,&:active {
    border-color:cyan;
  }

  
  
  
}

select {
  -webkit-appearance: none;
     -moz-appearance: none; 
          appearance: none; 
  background:beige;
  border:0;
  -webkit-border-radius:0;
  width:200px;
  height:30px;
  font-size:19px;
 font-family: 'Happy Monkey', cursive;
  color:blue;
}
*/





/*Downloaded from https://www.codeseek.co/jakob-e/a-pen-by-jakob-e-gqsDj */
      /*$('input').on('mousedown',function(e){
    $(this).blur();
});

$('input').on('mouseup',function(e){
    $(this).focus();
});
*/
/*
$('label').on('mouseup',function(e){
    $(this).find('input').focus();
})
*/



var $collection=$('input,select,textarea,button,a,:focus');
var $active=null;
var $focus=null;
$('input').on('mousedown keydown',function(e){
  if(e.type=='keydown' && e.which!=32)return;
  $active=$(e.target);
  $active.addClass('active');
}).on('mouseup keyup',function(e){
    $collection.removeClass('active');
    $collection.removeClass('focus');
    $focus=$(e.target);
    $focus.addClass('focus');
  });
  






$('input').on('change focus mouseenter mouseleave mousedown mouseup click keydown keyup',
    function(e){
    $('output').html(
      'id: '+ $(this).attr('id') + '<br>'+
      'event: '+ e.type + '<br>'+
      'checked: '+$ (this).is(':checked') + '<br>'+
      //    'empty: '+  $ (this).is(':empty')   + '<br>'+
      'hover: '+  $ (this).is(':hover')   + '<br>'+
      'focus: '+  $ (this).is(':focus')   + '<br>'+
      'active: '+ $ (this).is(':active')  + '<br>'+ 
      'active: '+$ (this).hasClass('active') + '<br>'+
      'focus: '+$ (this).hasClass('focus') + '<br>'
      
      
     // 'enabled: '+$ (this).is(':enabled') + '<br>' +
     // 'disabled: '+$ (this).is(':disabled') + '<br>' 

    )
});

Comments