CSS: `checkbox` Phone Number Input

css-checkbox-phone-number-input.markdown

CSS: checkbox Phone Number Input

Inspired by this amazing twitter thread.

CSS that can parse checkboxes to determine numbers because science.

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<h1>Our form is very sophisticated.</h1>
<h2>Please draw your phone number. Thank you.</h2>
<input type="checkbox" id="i111"/>
<input type="checkbox" id="i112"/>
<input type="checkbox" id="i113"/>
<input type="checkbox" id="i114"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i211"/>
<input type="checkbox" id="i212"/>
<input type="checkbox" id="i213"/>
<input type="checkbox" id="i214"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i311"/>
<input type="checkbox" id="i312"/>
<input type="checkbox" id="i313"/>
<input type="checkbox" id="i314"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i411"/>
<input type="checkbox" id="i412"/>
<input type="checkbox" id="i413"/>
<input type="checkbox" id="i414"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i511"/>
<input type="checkbox" id="i512"/>
<input type="checkbox" id="i513"/>
<input type="checkbox" id="i514"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i611"/>
<input type="checkbox" id="i612"/>
<input type="checkbox" id="i613"/>
<input type="checkbox" id="i614"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i711"/>
<input type="checkbox" id="i712"/>
<input type="checkbox" id="i713"/>
<input type="checkbox" id="i714"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i811"/>
<input type="checkbox" id="i812"/>
<input type="checkbox" id="i813"/>
<input type="checkbox" id="i814"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i911"/>
<input type="checkbox" id="i912"/>
<input type="checkbox" id="i913"/>
<input type="checkbox" id="i914"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i1011"/>
<input type="checkbox" id="i1012"/>
<input type="checkbox" id="i1013"/>
<input type="checkbox" id="i1014"/><span>&nbsp;</span><span>&nbsp;</span><br/>
<input type="checkbox" id="i121"/>
<input type="checkbox" id="i122"/>
<input type="checkbox" id="i123"/>
<input type="checkbox" id="i124"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i221"/>
<input type="checkbox" id="i222"/>
<input type="checkbox" id="i223"/>
<input type="checkbox" id="i224"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i321"/>
<input type="checkbox" id="i322"/>
<input type="checkbox" id="i323"/>
<input type="checkbox" id="i324"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i421"/>
<input type="checkbox" id="i422"/>
<input type="checkbox" id="i423"/>
<input type="checkbox" id="i424"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i521"/>
<input type="checkbox" id="i522"/>
<input type="checkbox" id="i523"/>
<input type="checkbox" id="i524"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i621"/>
<input type="checkbox" id="i622"/>
<input type="checkbox" id="i623"/>
<input type="checkbox" id="i624"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i721"/>
<input type="checkbox" id="i722"/>
<input type="checkbox" id="i723"/>
<input type="checkbox" id="i724"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i821"/>
<input type="checkbox" id="i822"/>
<input type="checkbox" id="i823"/>
<input type="checkbox" id="i824"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i921"/>
<input type="checkbox" id="i922"/>
<input type="checkbox" id="i923"/>
<input type="checkbox" id="i924"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i1021"/>
<input type="checkbox" id="i1022"/>
<input type="checkbox" id="i1023"/>
<input type="checkbox" id="i1024"/><span>&nbsp;</span><span>&nbsp;</span><br/>
<input type="checkbox" id="i131"/>
<input type="checkbox" id="i132"/>
<input type="checkbox" id="i133"/>
<input type="checkbox" id="i134"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i231"/>
<input type="checkbox" id="i232"/>
<input type="checkbox" id="i233"/>
<input type="checkbox" id="i234"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i331"/>
<input type="checkbox" id="i332"/>
<input type="checkbox" id="i333"/>
<input type="checkbox" id="i334"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i431"/>
<input type="checkbox" id="i432"/>
<input type="checkbox" id="i433"/>
<input type="checkbox" id="i434"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i531"/>
<input type="checkbox" id="i532"/>
<input type="checkbox" id="i533"/>
<input type="checkbox" id="i534"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i631"/>
<input type="checkbox" id="i632"/>
<input type="checkbox" id="i633"/>
<input type="checkbox" id="i634"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i731"/>
<input type="checkbox" id="i732"/>
<input type="checkbox" id="i733"/>
<input type="checkbox" id="i734"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i831"/>
<input type="checkbox" id="i832"/>
<input type="checkbox" id="i833"/>
<input type="checkbox" id="i834"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i931"/>
<input type="checkbox" id="i932"/>
<input type="checkbox" id="i933"/>
<input type="checkbox" id="i934"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i1031"/>
<input type="checkbox" id="i1032"/>
<input type="checkbox" id="i1033"/>
<input type="checkbox" id="i1034"/><span>&nbsp;</span><span>&nbsp;</span><br/>
<input type="checkbox" id="i141"/>
<input type="checkbox" id="i142"/>
<input type="checkbox" id="i143"/>
<input type="checkbox" id="i144"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i241"/>
<input type="checkbox" id="i242"/>
<input type="checkbox" id="i243"/>
<input type="checkbox" id="i244"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i341"/>
<input type="checkbox" id="i342"/>
<input type="checkbox" id="i343"/>
<input type="checkbox" id="i344"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i441"/>
<input type="checkbox" id="i442"/>
<input type="checkbox" id="i443"/>
<input type="checkbox" id="i444"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i541"/>
<input type="checkbox" id="i542"/>
<input type="checkbox" id="i543"/>
<input type="checkbox" id="i544"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i641"/>
<input type="checkbox" id="i642"/>
<input type="checkbox" id="i643"/>
<input type="checkbox" id="i644"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i741"/>
<input type="checkbox" id="i742"/>
<input type="checkbox" id="i743"/>
<input type="checkbox" id="i744"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i841"/>
<input type="checkbox" id="i842"/>
<input type="checkbox" id="i843"/>
<input type="checkbox" id="i844"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i941"/>
<input type="checkbox" id="i942"/>
<input type="checkbox" id="i943"/>
<input type="checkbox" id="i944"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i1041"/>
<input type="checkbox" id="i1042"/>
<input type="checkbox" id="i1043"/>
<input type="checkbox" id="i1044"/><span>&nbsp;</span><span>&nbsp;</span><br/>
<input type="checkbox" id="i151"/>
<input type="checkbox" id="i152"/>
<input type="checkbox" id="i153"/>
<input type="checkbox" id="i154"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i251"/>
<input type="checkbox" id="i252"/>
<input type="checkbox" id="i253"/>
<input type="checkbox" id="i254"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i351"/>
<input type="checkbox" id="i352"/>
<input type="checkbox" id="i353"/>
<input type="checkbox" id="i354"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i451"/>
<input type="checkbox" id="i452"/>
<input type="checkbox" id="i453"/>
<input type="checkbox" id="i454"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i551"/>
<input type="checkbox" id="i552"/>
<input type="checkbox" id="i553"/>
<input type="checkbox" id="i554"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i651"/>
<input type="checkbox" id="i652"/>
<input type="checkbox" id="i653"/>
<input type="checkbox" id="i654"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i751"/>
<input type="checkbox" id="i752"/>
<input type="checkbox" id="i753"/>
<input type="checkbox" id="i754"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i851"/>
<input type="checkbox" id="i852"/>
<input type="checkbox" id="i853"/>
<input type="checkbox" id="i854"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i951"/>
<input type="checkbox" id="i952"/>
<input type="checkbox" id="i953"/>
<input type="checkbox" id="i954"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i1051"/>
<input type="checkbox" id="i1052"/>
<input type="checkbox" id="i1053"/>
<input type="checkbox" id="i1054"/><span>&nbsp;</span><span>&nbsp;</span><br/>
<input type="checkbox" id="i161"/>
<input type="checkbox" id="i162"/>
<input type="checkbox" id="i163"/>
<input type="checkbox" id="i164"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i261"/>
<input type="checkbox" id="i262"/>
<input type="checkbox" id="i263"/>
<input type="checkbox" id="i264"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i361"/>
<input type="checkbox" id="i362"/>
<input type="checkbox" id="i363"/>
<input type="checkbox" id="i364"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i461"/>
<input type="checkbox" id="i462"/>
<input type="checkbox" id="i463"/>
<input type="checkbox" id="i464"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i561"/>
<input type="checkbox" id="i562"/>
<input type="checkbox" id="i563"/>
<input type="checkbox" id="i564"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i661"/>
<input type="checkbox" id="i662"/>
<input type="checkbox" id="i663"/>
<input type="checkbox" id="i664"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i761"/>
<input type="checkbox" id="i762"/>
<input type="checkbox" id="i763"/>
<input type="checkbox" id="i764"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i861"/>
<input type="checkbox" id="i862"/>
<input type="checkbox" id="i863"/>
<input type="checkbox" id="i864"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i961"/>
<input type="checkbox" id="i962"/>
<input type="checkbox" id="i963"/>
<input type="checkbox" id="i964"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i1061"/>
<input type="checkbox" id="i1062"/>
<input type="checkbox" id="i1063"/>
<input type="checkbox" id="i1064"/><span>&nbsp;</span><span>&nbsp;</span><br/>
<input type="checkbox" id="i171"/>
<input type="checkbox" id="i172"/>
<input type="checkbox" id="i173"/>
<input type="checkbox" id="i174"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i271"/>
<input type="checkbox" id="i272"/>
<input type="checkbox" id="i273"/>
<input type="checkbox" id="i274"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i371"/>
<input type="checkbox" id="i372"/>
<input type="checkbox" id="i373"/>
<input type="checkbox" id="i374"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i471"/>
<input type="checkbox" id="i472"/>
<input type="checkbox" id="i473"/>
<input type="checkbox" id="i474"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i571"/>
<input type="checkbox" id="i572"/>
<input type="checkbox" id="i573"/>
<input type="checkbox" id="i574"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i671"/>
<input type="checkbox" id="i672"/>
<input type="checkbox" id="i673"/>
<input type="checkbox" id="i674"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i771"/>
<input type="checkbox" id="i772"/>
<input type="checkbox" id="i773"/>
<input type="checkbox" id="i774"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i871"/>
<input type="checkbox" id="i872"/>
<input type="checkbox" id="i873"/>
<input type="checkbox" id="i874"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i971"/>
<input type="checkbox" id="i972"/>
<input type="checkbox" id="i973"/>
<input type="checkbox" id="i974"/><span>&nbsp;</span><span>&nbsp;</span>
<input type="checkbox" id="i1071"/>
<input type="checkbox" id="i1072"/>
<input type="checkbox" id="i1073"/>
<input type="checkbox" id="i1074"/><span>&nbsp;</span><span>&nbsp;</span><br/>
<section>
  <p>Your phone number is</p>
  <span id="o1"></span><span id="o2"></span><span id="o3"></span><span id="o4"></span><span id="o5"></span><span id="o6"></span><span id="o7"></span><span id="o8"></span><span id="o9"></span><span id="o10"></span>
</section>
<aside>
  <div id="o1"></div>
  <div id="o2"></div>
  <div id="o3"></div>
  <div id="o4"></div>
  <div id="o5"></div>
  <div id="o6"></div>
  <div id="o7"></div>
  <div id="o8"></div>
  <div id="o9"></div>
  <div id="o10"></div>
</aside>

style.scss

$patterns: (
  (
    (0, 0, 1, 0), 
    (0, 1, 1, 0), 
    (0, 0, 1, 0), 
    (0, 0, 1, 0), 
    (0, 0, 1, 0), 
    (0, 0, 1, 0), 
    (0, 0, 1, 0), 
  ), 
  (
    (0, 1, 1, 0), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 0, 1, 0), 
    (0, 1, 0, 0), 
    (1, 0, 0, 0), 
    (1, 1, 1, 1), 
  ), 
  (
    (0, 1, 1, 0), 
    (1, 0, 0, 1), 
    (0, 0, 0, 1), 
    (0, 1, 1, 0), 
    (0, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 0), 
  ), 
  (
    (1, 0, 0, 0), 
    (1, 0, 1, 0), 
    (1, 0, 1, 0), 
    (1, 1, 1, 1), 
    (0, 0, 1, 0), 
    (0, 0, 1, 0), 
    (0, 0, 1, 0), 
  ), 
  (
    (1, 1, 1, 1), 
    (1, 0, 0, 0), 
    (1, 0, 0, 0), 
    (1, 1, 1, 0), 
    (0, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 0), 
  ), 
  (
    (0, 1, 1, 0), 
    (1, 0, 0, 1), 
    (1, 0, 0, 0), 
    (1, 1, 1, 0), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 0), 
  ), 
  (
    (1, 1, 1, 1), 
    (1, 0, 0, 1), 
    (0, 0, 0, 1), 
    (0, 0, 1, 0), 
    (0, 0, 1, 0), 
    (0, 1, 0, 0), 
    (0, 1, 0, 0), 
  ), 
  (
    (0, 1, 1, 0), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 0), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 0), 
  ), 
  (
    (0, 1, 1, 0), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 1), 
    (0, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 0), 
  ), 
  (
    (0, 1, 1, 0), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (1, 0, 0, 1), 
    (0, 1, 1, 0), 
  )  
);

$nums: 10;
$pattern-vals: (1,2,3,4,5,6,7,8,9,0);

@each $p in $patterns {
  $index-p: index($patterns, $p);
  $val: nth($pattern-vals, $index-p);
  $sel: "";
  @for $i from 1 through $nums {
    @for $r from 1 through 7 {
      $map-r: nth($p, $r);
      @for $c from 1 through 4 {
        $map-c: nth($map-r, $c);
        $sel: $sel + "#i#{$i}#{$r}#{$c}";
        @if $map-c == 0 {
          $sel: $sel + ":not(:checked) ~";
        } @else {
          $sel: $sel + ":checked ~";
        }
      }
    }
    $sel: $sel + "section #o#{$i}::after,";
  }
  #{$sel} {
    content: "#{$val}";    
  }
}




$di: 15px;
$active: #FFF;
$inactive: #666;
@each $p in $patterns {
  $shad: "";
  $index-p: index($patterns, $p);
  @for $r from 1 through 7 {
    $map-r: nth($p, $r);
    @for $c from 1 through 4 {
      $map-c: nth($map-r, $c);
      $x: ($c - 1) * $di;
      $y: ($r - 1) * $di;
      $shad: $shad + "#{$x} #{$y} 0px 0px ";
      @if $map-c == 0 {
        $shad: $shad + $inactive;
      } @else {
        $shad: $shad + $active;
      }
      @if $c + $r != 11 {
        $shad: $shad + ", ";
      }
    }
  }
  $first: nth(nth($p, 1), 1);
  @if $first == 1 {
    aside div:nth-child(#{$index-p}) { background: $active; } 
  } @else {
    aside div:nth-child(#{$index-p}) { background: $inactive; }
  }
  aside div:nth-child(#{$index-p}) {
    box-shadow: #{$shad};
  }
}

body {
  padding-right: $di * 6;
  padding-left: $di;
  min-width: 1000px;
  box-sizing: border-box;
  text-align: center;
  color: #222;  
  h1 { margin-top: 4rem; }
}

aside {
  position: fixed;
  right: 0;
  top: 0; 
  bottom: 0;
  padding: $di;
  box-sizing: border-box;
  width: $di * 6;
  overflow: auto;
  background: #222;
}
aside div {
  height: $di * 0.8;
  width: $di * 0.8;
  display: block;
  margin-bottom: $di * 7;
}

section span {
  font-weight: bold;
  font-size: 3rem;
  &::after { content: "_"; }
  &:nth-of-type(1)::before { content: "("; }
  &:nth-of-type(4)::before { content: ") "; }
  &:nth-of-type(7)::before { content: "-"; }
}