cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <form class="search-form">
  <input type="search" value="" placeholder="Search" class="search-input">
  <button type="submit" class="search-button">
    <svg class="submit-button">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>
    </svg>
  </button>
  <div class="search-option">
    <div>
      <input name="type" type="radio" value="type-users" id="type-users">
      <label for="type-users">
        <svg class="edit-pen-title">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
        </svg>
        <span>Users</span>
      </label>
    </div>
    
    <div>
      <input name="type" type="radio" value="type-posts" id="type-posts">
      <label for="type-posts">
        <svg class="edit-pen-title">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#post"></use>
        </svg>
        <span>Posts</span>
      </label>
    </div>
    <div>
      <input name="type" type="radio" value="type-images" id="type-images">
      <label for="type-images">
        <svg class="edit-pen-title">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#images"></use>
        </svg>
        <span>Images</span>
      </label>
    </div>
    <div>
      <input name="type" type="radio" value="type-special" id="type-special" checked="">
      <label for="type-special">
        <svg class="edit-pen-title">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#special"></use>
        </svg>
        <span>Special</span>
      </label>
    </div>
  </div>
</form>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <symbol id="search" viewBox="0 0 32 32">
    <path d="M 19.5 3 C 14.26514 3 10 7.2651394 10 12.5 C 10 14.749977 10.810825 16.807458 12.125 18.4375 L 3.28125 27.28125 L 4.71875 28.71875 L 13.5625 19.875 C 15.192542 21.189175 17.250023 22 19.5 22 C 24.73486 22 29 17.73486 29 12.5 C 29 7.2651394 24.73486 3 19.5 3 z M 19.5 5 C 23.65398 5 27 8.3460198 27 12.5 C 27 16.65398 23.65398 20 19.5 20 C 15.34602 20 12 16.65398 12 12.5 C 12 8.3460198 15.34602 5 19.5 5 z" />
  </symbol>
  <symbol id="user" viewBox="0 0 32 32">
    <path d="M 16 4 C 12.145852 4 9 7.1458513 9 11 C 9 13.393064 10.220383 15.517805 12.0625 16.78125 C 8.485554 18.302923 6 21.859881 6 26 L 8 26 C 8 21.533333 11.533333 18 16 18 C 20.466667 18 24 21.533333 24 26 L 26 26 C 26 21.859881 23.514446 18.302923 19.9375 16.78125 C 21.779617 15.517805 23 13.393064 23 11 C 23 7.1458513 19.854148 4 16 4 z M 16 6 C 18.773268 6 21 8.2267317 21 11 C 21 13.773268 18.773268 16 16 16 C 13.226732 16 11 13.773268 11 11 C 11 8.2267317 13.226732 6 16 6 z" /></symbol>
  <symbol id="images" viewbox="0 0 32 32">
    <path d="M 2 5 L 2 6 L 2 26 L 2 27 L 3 27 L 29 27 L 30 27 L 30 26 L 30 6 L 30 5 L 29 5 L 3 5 L 2 5 z M 4 7 L 28 7 L 28 20.90625 L 22.71875 15.59375 L 22 14.875 L 21.28125 15.59375 L 17.46875 19.40625 L 11.71875 13.59375 L 11 12.875 L 10.28125 13.59375 L 4 19.875 L 4 7 z M 24 9 C 22.895431 9 22 9.8954305 22 11 C 22 12.104569 22.895431 13 24 13 C 25.104569 13 26 12.104569 26 11 C 26 9.8954305 25.104569 9 24 9 z M 11 15.71875 L 20.1875 25 L 4 25 L 4 22.71875 L 11 15.71875 z M 22 17.71875 L 28 23.71875 L 28 25 L 23.03125 25 L 18.875 20.8125 L 22 17.71875 z" />
  </symbol>
  <symbol id="post" viewbox="0 0 32 32">
    <path d="M 3 5 L 3 6 L 3 23 C 3 25.209804 4.7901961 27 7 27 L 25 27 C 27.209804 27 29 25.209804 29 23 L 29 13 L 29 12 L 28 12 L 23 12 L 23 6 L 23 5 L 22 5 L 4 5 L 3 5 z M 5 7 L 21 7 L 21 12 L 21 13 L 21 23 C 21 23.73015 21.221057 24.41091 21.5625 25 L 7 25 C 5.8098039 25 5 24.190196 5 23 L 5 7 z M 7 9 L 7 10 L 7 13 L 7 14 L 8 14 L 18 14 L 19 14 L 19 13 L 19 10 L 19 9 L 18 9 L 8 9 L 7 9 z M 9 11 L 17 11 L 17 12 L 9 12 L 9 11 z M 23 14 L 27 14 L 27 23 C 27 24.190196 26.190196 25 25 25 C 23.809804 25 23 24.190196 23 23 L 23 14 z M 7 15 L 7 17 L 12 17 L 12 15 L 7 15 z M 14 15 L 14 17 L 19 17 L 19 15 L 14 15 z M 7 18 L 7 20 L 12 20 L 12 18 L 7 18 z M 14 18 L 14 20 L 19 20 L 19 18 L 14 18 z M 7 21 L 7 23 L 12 23 L 12 21 L 7 21 z M 14 21 L 14 23 L 19 23 L 19 21 L 14 21 z" />
  </symbol>
  <symbol id="special" viewbox="0 0 32 32">
    <path d="M 4 4 L 4 5 L 4 27 L 4 28 L 5 28 L 27 28 L 28 28 L 28 27 L 28 5 L 28 4 L 27 4 L 5 4 L 4 4 z M 6 6 L 26 6 L 26 26 L 6 26 L 6 6 z M 16 8.40625 L 13.6875 13.59375 L 8 14.1875 L 12.3125 18 L 11.09375 23.59375 L 16 20.6875 L 20.90625 23.59375 L 19.6875 18 L 24 14.1875 L 18.3125 13.59375 L 16 8.40625 z M 16 13.3125 L 16.5 14.40625 L 17 15.5 L 18.1875 15.59375 L 19.40625 15.6875 L 18.5 16.5 L 17.59375 17.3125 L 17.8125 18.40625 L 18.09375 19.59375 L 17 19 L 16 18.40625 L 15 19 L 14 19.59375 L 14.3125 18.40625 L 14.5 17.3125 L 13.59375 16.5 L 12.6875 15.6875 L 13.90625 15.59375 L 15.09375 15.5 L 15.59375 14.40625 L 16 13.3125 z" />
  </symbol>
</svg>
            
          
!
            
              /*--------------------
Body
--------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

$color: #e24040;

body {
  height: 100vh;
  margin: 0;  
  background: #DEDEDE;
  color: #5a6674;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
}


/*--------------------
App
--------------------*/
.search-form {
  position: relative;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 40px;
  border-radius: 40px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  background: #fff;
  transition: all 0.3s ease;

  &.focus {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  }
}

.search-input {
  position: absolute;
  top: 10px;
  left: 38px;
  font-size: 14px;
  background: none;
  color: #5a6674;
  width: 195px;
  height: 20px;
  border: none;
  appearance: none;
  outline: none;

  &::-webkit-search-cancel-button {
    appearance: none;
  }
}

.search-button {
  position: absolute;
  top: 10px;
  left: 15px;
  height: 20px;
  width: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  outline: none!important;
  cursor: pointer;
  
  & svg {
    width: 20px;
    height: 20px;
    fill: #5a6674;
  }
}

.search-option {
  position: absolute;
  text-align: right;
  top: 10px;
  right: 15px;

  div {
    position: relative;
    display: inline-block;
    margin: 0 1px;
    cursor: pointer;
    
    input {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.01;
      cursor: pointer;
    }
    
    span {
      position: absolute;
      display: block;
      text-align: center;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      background: #929AA3;
      color: #fff;
      font-size: 9px;
      letter-spacing: 1px;
      line-height: 1;
      text-transform: uppercase;
      padding: 4px 7px;
      border-radius: 12px;
      top: -18px;
      transition: all .2s ease-in-out;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        border-top: 4px solid #929AA3;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        transition: all .2s ease-in-out;
      }
    }
    
    &:hover span {
      opacity: 1;
      top: -21px;
    }
    
    label {
      display: block;
      cursor: pointer;
    }
    
    svg {
      height: 20px;
      width: 20px;
      fill: #5a6674;
      opacity: 0.6;
      transition: all .2s ease-in-out;
      pointer-events: none;
    }
    
    &:hover svg {
      opacity: 1;
    }
    
    input:checked + label svg {
      fill: $color;
      opacity: .9;
    }
    
    input:checked + label span {
      background: $color;
      
      &::after {
        border-top-color: $color;
      }
    }
  }


}

            
          
!
            
              $('.search-input').focus(function(){
  $(this).parent().addClass('focus');
}).blur(function(){
  $(this).parent().removeClass('focus');
})
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console