Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="container">
  <div id="wrapper_search">
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="40"
   height="40"
   viewBox="0 0 100 100"
   id="icon-search"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       id="g4387">
      <circle
         style="fill:none;stroke:#251D3A;stroke-width:5.365;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path846"
         cx="40.743679"
         cy="40.028881"
         r="31.808666" />
      <rect
         style="fill:#251D3A;fill-opacity:1;stroke-width:0.705676"
         id="rect950"
         width="7.5906653"
         height="39.311199"
         x="-4.1508265"
         y="87.18325"
         transform="matrix(0.74711059,-0.66469976,0.68658578,0.72704881,0,0)" />
    </g>
  </g>
</svg>
  

    <svg
   width="181"
   height="40"
   viewBox="0 0 47.889702 10.583334"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  

    <g
       aria-label="SEARCH"
       class=""
       id="el-placeholder"
       style="stroke:#ea5106"           transform="translate(-26.175178,-42.530791)">
      <path
         d="m 32.92792,49.613625 q 0,0.529165 -0.359832,1.047746 -0.349249,0.507999 -0.994831,0.825498 -0.634998,0.328082 -1.449912,0.328082 -0.687914,0 -1.09008,-0.116416 -0.402165,-0.105833 -0.402165,-0.306916 0,-0.105833 0.148166,-0.349249 0.15875,-0.253999 0.243416,-0.253999 0.127,0 0.127,0.05292 0,0.03175 -0.04233,0.07408 -0.03175,0.04233 -0.03175,0.08467 0,0.03175 0.126999,0.09525 0.137583,0.0635 0.412749,0.116416 0.275166,0.05292 0.666748,0.05292 0.624414,0 1.09008,-0.243416 0.476248,-0.243415 0.730247,-0.613831 0.254,-0.370415 0.254,-0.719664 0,-0.455082 -0.444499,-0.783164 -0.433915,-0.328083 -1.407579,-0.624415 -0.941914,-0.306916 -1.460495,-0.507999 -0.507999,-0.211666 -0.825498,-0.507998 -0.317499,-0.306916 -0.317499,-0.740831 0,-0.582081 0.656165,-1.142996 0.656165,-0.571498 1.619245,-0.920747 0.96308,-0.359832 1.788577,-0.359832 0.423332,0 0.455082,0.169332 0.03175,0.169333 0.03175,0.380999 0,0.15875 -0.116416,0.15875 -0.05292,0 -0.127,-0.03175 -0.0635,-0.04233 -0.116416,-0.0635 -0.0635,-0.02117 -0.148166,-0.04233 -0.08467,-0.02117 -0.243416,-0.02117 -0.550332,0 -1.322913,0.285749 -0.77258,0.285749 -1.344079,0.709081 -0.560914,0.423332 -0.560914,0.814914 0,0.317499 0.253999,0.550332 0.264582,0.232833 0.698498,0.402165 0.433915,0.15875 1.227662,0.402166 1.164163,0.338665 1.714495,0.761997 0.560915,0.423332 0.560915,1.037164 z"
         
         id="path15112" />
      <path
         d="m 40.905078,44.713557 q 0,0.126999 -0.179916,0.222249 -0.285749,0.15875 -0.89958,0.338666 -0.603249,0.179916 -0.994831,0.253999 -0.613831,0.116416 -1.238246,0.190499 -0.613831,0.0635 -0.793747,0.07408 0.01058,0.613832 0.03175,1.269996 0.02117,0.645582 0.03175,0.888998 0.412748,-0.05292 1.238246,-0.201083 l 0.402165,-0.0635 q 0.666748,-0.116416 1.02658,-0.423332 0.1905,-0.148166 0.275166,-0.148166 0.07408,0 0.116416,0.08467 0.05292,0.07408 0.05292,0.15875 0,0.190499 -0.433916,0.423332 -0.423332,0.222249 -0.941913,0.328082 -0.433915,0.09525 -0.973664,0.179916 -0.539748,0.08467 -0.709081,0.105833 0.0635,1.809744 0.370416,2.688158 0.306915,0.105833 0.603248,0.15875 0.296332,0.04233 0.761997,0.04233 0.465665,0 0.888997,-0.116416 0.423332,-0.127 0.677332,-0.306916 0.264582,-0.179916 0.264582,-0.338666 0,-0.08467 -0.03175,-0.158749 -0.03175,-0.08467 -0.08467,-0.169333 -0.02117,-0.03175 -0.07408,-0.09525 -0.04233,-0.07408 -0.04233,-0.116416 0,-0.105833 0.232832,-0.105833 0.169333,0 0.285749,0.148166 0.127,0.137583 0.127,0.306916 0,0.338666 -0.306916,0.666748 -0.296332,0.328082 -0.825497,0.529165 -0.518582,0.211666 -1.15358,0.211666 -0.645581,0 -1.05833,-0.07408 -0.412749,-0.0635 -0.624415,-0.264583 -0.253999,-0.285749 -0.359832,-0.99483 -0.09525,-0.709081 -0.169333,-1.894411 -0.201082,0.05292 -0.455081,0.09525 -0.243416,0.03175 -0.370416,0.03175 -0.127,0 -0.211666,-0.07408 -0.07408,-0.08467 -0.07408,-0.201083 0,-0.07408 0.02117,-0.126999 0.03175,-0.05292 0.08467,-0.0635 0.349249,-0.04233 0.507998,-0.05292 l 0.455082,-0.05292 q -0.04233,-1.365246 -0.08467,-2.222493 -0.15875,0 -0.253999,0.01058 l -0.486832,0.01058 q -0.09525,0 -0.148166,-0.05292 -0.05292,-0.05292 -0.05292,-0.116416 0,-0.253999 0.338666,-0.338666 0.126999,-0.02117 0.317499,-0.04233 0.201082,-0.03175 0.264582,-0.03175 0.201083,-0.222249 0.444499,-0.222249 0.04233,0 0.0635,0.07408 0.03175,0.0635 0.03175,0.09525 0.698497,-0.03175 1.661578,-0.15875 0.634998,-0.08467 1.95791,-0.402165 l 0.391582,-0.08467 q 0.105833,0 0.105833,0.127 z"
         
         id="path15114" />
      <path
         d="m 48.892818,48.163713 q 0,0.07408 -0.04233,0.158749 -0.03175,0.08467 -0.09525,0.127 -0.07408,0.0635 -0.306915,0.116416 -0.232833,0.04233 -0.317499,0.05292 0.08467,0.402166 0.08467,0.391583 0.07408,0.264582 0.15875,0.730247 0.190499,1.068913 0.391582,1.820328 0.05292,0.243416 0.05292,0.285749 0,0.105833 -0.08467,0.179916 -0.08467,0.07408 -0.201083,0.07408 -0.105833,0 -0.190499,-0.116416 -0.08467,-0.105833 -0.116417,-0.1905 -0.09525,-0.359832 -0.179916,-0.80433 -0.07408,-0.444499 -0.179916,-1.068914 -0.04233,-0.275165 -0.137583,-0.677331 -0.09525,-0.412749 -0.126999,-0.539748 -0.624415,0.08467 -2.14841,0.338665 l -0.613831,0.105833 -0.22225,0.624415 -0.296332,0.846664 q -0.370416,1.15358 -0.529165,1.777994 -0.03175,0.148167 -0.127,0.243416 -0.09525,0.105833 -0.232832,0.105833 -0.116417,0 -0.201083,-0.0635 -0.07408,-0.0635 -0.07408,-0.179917 0,-0.116416 0.127,-0.497415 0.126999,-0.370415 0.148166,-0.444498 0.04233,-0.105833 0.169333,-0.486832 0.137582,-0.412749 0.349248,-0.99483 0.22225,-0.592665 0.296333,-0.783164 -0.539748,0.126999 -0.804331,0.201082 -0.402165,0.105833 -0.497415,0.105833 -0.116416,0 -0.179916,-0.08467 -0.05292,-0.09525 -0.05292,-0.201083 0,-0.126999 0.0635,-0.169333 0.0635,-0.05292 0.211666,-0.09525 0.402166,-0.09525 0.846664,-0.1905 0.455082,-0.09525 0.624415,-0.126999 0.105833,-0.306916 0.158749,-0.518582 0.04233,-0.137583 0.105833,-0.338666 0.07408,-0.211666 0.15875,-0.518581 l 0.158749,-0.539748 q 0.402166,-1.418163 0.465665,-1.619245 0.05292,-0.148167 0.09525,-0.232833 0.05292,-0.08467 0.137583,-0.08467 0.211666,0 0.380999,0.0635 0.02117,-0.02117 0.0635,-0.08467 0.05292,-0.07408 0.105833,-0.09525 0.0635,-0.03175 0.158749,-0.03175 0.1905,0 0.433915,0.433916 0.254,0.433915 0.486832,1.02658 0.137583,0.349249 0.349249,1.047747 0.211666,0.687914 0.275166,0.910163 0.158749,-0.02117 0.264582,-0.05292 0.116417,-0.04233 0.148167,-0.05292 0.05292,-0.02117 0.116416,-0.07408 0.0635,-0.05292 0.116416,-0.07408 0.05292,-0.03175 0.116416,0 0.137583,0.0635 0.137583,0.264583 z m -1.386412,0.07408 q -0.05292,-0.1905 -0.222249,-0.793748 -0.169333,-0.613831 -0.317499,-0.99483 -0.148166,-0.391582 -0.380999,-0.804331 -0.232833,-0.412748 -0.391582,-0.518581 l -0.116416,0.275165 q -0.201083,0.402166 -0.306916,0.730248 -0.253999,0.761998 -0.804331,2.518825 l 1.238246,-0.211666 1.015997,-0.158749 z"
         
         id="path15116" />
      <path
         d="m 57.526146,50.682538 q 0,0.126999 -0.105833,0.306916 -0.105833,0.179916 -0.22225,0.179916 -0.105833,0 -0.201082,-0.03175 -0.09525,-0.04233 -0.285749,-0.148166 -0.666748,-0.391583 -1.746245,-0.761998 -0.476248,-0.158749 -1.132413,-0.328082 -0.645581,-0.179916 -1.015997,-0.264583 l 0.07408,1.365246 q 0.01058,0.285749 0.07408,0.476248 0.0635,0.201083 0.0635,0.254 0,0.116416 -0.116416,0.190499 -0.116416,0.08467 -0.243416,0.08467 -0.158749,0 -0.201082,-0.222249 0,-0.02117 -0.03175,-0.190499 -0.02117,-0.169333 -0.02117,-0.476249 0,-0.201083 -0.04233,-0.857247 -0.01058,-0.222249 -0.02117,-0.423332 -0.01058,-0.211666 -0.01058,-0.370416 -0.03175,-0.03175 -0.08467,-0.07408 -0.04233,-0.04233 -0.07408,-0.116416 -0.03175,-0.09525 -0.05292,-0.201083 -0.02117,-0.105833 -0.02117,-0.158749 0,-0.07408 0.04233,-0.116416 0.04233,-0.04233 0.126999,-0.09525 -0.0635,-2.645825 -0.0635,-3.026824 0,-0.338665 0.01058,-0.624415 0.01058,-0.285749 0.01058,-0.380998 -0.0635,0.01058 -0.380999,0.05292 -0.317499,0.04233 -0.507998,0.08467 -0.677331,0.158749 -1.02658,0.306915 -0.359832,0.137583 -0.687915,0.317499 -0.09525,0.0635 -0.179916,0.105833 -0.09525,0.03175 -0.179916,0.03175 -0.08467,0 -0.148166,-0.07408 -0.0635,-0.08467 -0.0635,-0.201083 0,-0.201082 0.677331,-0.465665 0.677331,-0.264582 1.471079,-0.433915 0.444498,-0.09525 1.132413,-0.15875 0.687914,-0.07408 1.280579,-0.07408 1.015997,0 1.725078,0.22225 0.719664,0.222249 1.079497,0.624414 0.370415,0.402166 0.370415,0.920747 0,0.666748 -0.380999,1.142997 -0.380999,0.476248 -1.015996,0.825497 -0.624415,0.349249 -1.703912,0.793748 -0.275166,0.126999 -0.550331,0.232832 -0.264583,0.105833 -0.359832,0.148166 0,0.0635 0.01058,0.09525 1.142996,0.253999 2.254243,0.582082 l 0.222249,0.0635 q 1.15358,0.349249 1.703911,0.550332 0.550332,0.190499 0.550332,0.317499 z m -1.259413,-4.751902 q 0,-0.349249 -0.306916,-0.645581 -0.306915,-0.296332 -0.93133,-0.476248 -0.613831,-0.1905 -1.492245,-0.1905 -0.656165,0 -0.825498,0.02117 -0.01058,0.07408 -0.03175,0.349249 -0.01058,0.275165 -0.01058,0.550331 l 0.04233,1.693328 0.04233,1.312329 q 0.09525,-0.01058 0.370415,-0.09525 0.285749,-0.09525 0.476249,-0.179916 1.344079,-0.539749 2.000243,-1.079497 0.666748,-0.550332 0.666748,-1.259413 z"
         
         id="path15118" />
      <path
         d="m 65.058815,49.571291 q 0,0.105833 -0.1905,0.380999 -0.444498,0.603248 -1.195913,1.174746 -0.751414,0.560915 -1.650994,0.560915 -0.952497,0 -1.555745,-0.539748 -0.603249,-0.550332 -0.603249,-1.619245 0,-0.730247 0.254,-1.650995 0.253999,-0.920747 0.592664,-1.598078 0.349249,-0.687914 0.804331,-1.142996 0.465665,-0.455082 0.931331,-0.455082 0.455081,0 0.698497,0.328082 0.254,0.328083 0.254,0.814914 0,0.179916 -0.07408,0.370416 -0.0635,0.179916 -0.148166,0.306916 -0.08467,0.126999 -0.126999,0.126999 -0.08467,0 -0.08467,-0.09525 0,-0.03175 0.03175,-0.137582 0.04233,-0.116417 0.04233,-0.1905 0,-0.264582 -0.0635,-0.497415 -0.05292,-0.201083 -0.211666,-0.328082 -0.15875,-0.137583 -0.349249,-0.137583 -0.761998,0 -1.428746,1.471079 -0.264582,0.592664 -0.444498,1.333495 -0.179916,0.740831 -0.179916,1.428746 0,0.476248 0.190499,0.86783 0.201083,0.391582 0.560915,0.624415 0.370415,0.232833 0.857247,0.232833 0.772581,0 1.396996,-0.370416 0.634998,-0.370415 1.248829,-0.952497 0.02117,-0.02117 0.148166,-0.232832 0.127,-0.22225 0.1905,-0.22225 0.0635,0 0.08467,0.03175 0.02117,0.03175 0.02117,0.116416 z"
        
         id="path15120" />
      <path
         d="m 72.951317,48.587045 q 0,0.169332 -0.243416,0.243415 -0.190499,0.0635 -0.465665,0.08467 -0.264583,0.01058 -0.349249,0.01058 -0.01058,0.328082 -0.04233,0.730248 -0.03175,0.402165 -0.05292,0.666748 l -0.03175,0.328082 -0.02117,0.338666 -0.0635,0.814914 q -0.04233,0.539748 -0.349249,0.539748 -0.116416,0 -0.232833,-0.275166 -0.105833,-0.264582 -0.105833,-0.433915 0,-0.04233 0.08467,-0.169333 0.08467,-0.127 0.105833,-0.317499 0.04233,-0.296332 0.09525,-0.984247 0.05292,-0.687914 0.07408,-1.153579 -0.412749,0.03175 -0.888998,0.09525 -0.211666,0.02117 -0.952497,0.09525 -0.74083,0.07408 -1.164162,0.09525 -0.04233,0.698497 -0.09525,1.703911 -0.05292,1.005413 -0.05292,1.227663 0,0.08467 0.02117,0.222249 0.03175,0.137583 0.03175,0.211666 0,0.09525 -0.148166,0.190499 -0.137583,0.09525 -0.22225,0.09525 -0.105833,0 -0.179916,-0.137583 -0.0635,-0.137583 -0.0635,-0.317499 0,-0.09525 0.02117,-0.317499 0.02117,-0.211666 0.03175,-0.370415 0.04233,-0.285749 0.05292,-0.465666 0.05292,-0.624414 0.08467,-1.206496 0.03175,-0.582081 0.04233,-0.783164 -0.666748,0.116416 -1.259413,0.116416 -0.201082,0 -0.338665,-0.09525 -0.148166,-0.105833 -0.148166,-0.296333 0,-0.137583 0.07408,-0.201082 0.0635,-0.07408 0.275165,-0.07408 l 0.560915,0.01058 q 0.550332,0.02117 0.888998,0.02117 0.05292,-0.89958 0.05292,-1.439328 0,-1.227663 -0.02117,-2.201327 v -0.391582 q 0,-0.158749 0.116417,-0.253999 0.126999,-0.105833 0.285749,-0.105833 0.116416,0 0.158749,0.179916 0.04233,0.179916 0.04233,0.402166 0,0.232832 -0.05292,0.952497 -0.0635,1.227662 -0.0635,1.301745 l -0.05292,1.513412 q 0.888997,-0.02117 3.01624,-0.275166 0.04233,-0.306915 0.148166,-1.608661 0.04233,-0.687915 0.07408,-1.005414 l 0.0635,-0.825497 q 0.137583,-1.555745 0.137583,-1.947327 0,-0.137583 0.105833,-0.222249 0.105833,-0.08467 0.243416,-0.08467 0.190499,0 0.190499,0.370416 0,0.232832 -0.105833,1.238246 -0.116416,1.312329 -0.126999,1.460495 -0.0635,0.814914 -0.127,1.555745 -0.05292,0.740831 -0.07408,0.99483 0.190499,-0.03175 0.338666,-0.09525 0.190499,-0.0635 0.296332,-0.0635 0.105833,0 0.243416,0.126999 0.137583,0.127 0.137583,0.179917 z"
         
         id="path15122" />
    </g>
</svg>
    <input id='field-search' type='text'>
  </div>
  <strong class='smile'>:)</strong>
</div>
              
            
!

CSS

              
                *, *:after, *:before{
  margin: 0;
  padding: 0;
}
body,html{
  font-size: 16px;
  font-family; arial;
}
#container,
#wrapper_search{
  display: flex;
}
#container{
  background-color: orangered;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
#wrapper_search{
  background-color:white;
  border-radius: 7px;
  padding: 5px
}
#wrapper_search input{
  padding: 2px 4px 2px 44px;
  font-size:17px;
  color: #251D3A;
  font-weight: 700;
  width: 186px;
  border:none;
  outline: none;
  margin-left: -223px;
  background-color: transparent;
}

#icon-search circle,
#icon-search rect{
  transition: all .65s ease-out;
}
#icon-search.focus circle,
#icon-search.focus rect{
  transition: all .65s ease-in;
}
#icon-search.focus circle{
  stroke-width: 10!important;
}

#icon-search.focus rect{
  width: 10px!important;
}

path{
  transition: all .25s ease-in;
  transform:rotateZ(0) translateY(0);
}
.hide path{
  opacity: 0;
  transition: all .35s ease-out;
  transform: rotateZ(4deg) translateY(13px) ;
}
.hide path:nth-child(2n-1){
  transform:translateY(-13px);
}
.smile{
  font-weight: 700;
  font-size: 35px;
  color: #251D3A;
  transform: rotate(90deg) translateY(-20px)
}
              
            
!

JS

              
                
let el_placeholder = document.getElementById('el-placeholder');

let input_search = document
.getElementById("field-search");

let icon_search = document
.getElementById('icon-search');

let focusInput = (el) =>{
  if(el.target.value == ""){
   el_placeholder
     .classList.toggle('hide');  
    icon_search
    .classList.toggle('focus');
  } 
}

input_search.addEventListener(
  'focus',
  focusInput
);

input_search.addEventListener(
  'blur',
  focusInput
);
              
            
!
999px

Console