123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="menu"></div>
<div class="wrapper white maven px-20"> 
  <h2 class="mt-0 mb-48 center">Please select File 145</h2>
  <select class="search" name="files">
      <option value=""></option>
      <option value="File1">File 1</option>
      <option value="File2">File 2</option>
      <option value="File3">File 3</option>
      <option value="File4">File 4</option>
      <option value="File5">File 5</option>
      <option value="File6">File 6</option>
      <option value="File7">File 7</option>
      <option value="File8">File 8</option>
      <option value="File9">File 9</option>
      <option value="File10">File 10</option>
      <option value="File11">File 11</option>
      <option value="File12">File 12</option>
      <option value="File13">File 13</option>
      <option value="File14">File 14</option>
      <option value="File15">File 15</option>
      <option value="File16">File 16</option>
      <option value="File17">File 17</option>
      <option value="File18">File 18</option>
      <option value="File19">File 19</option>
      <option value="File20">File 20</option>
      <option value="File21">File 21</option>
      <option value="File22">File 22</option>
      <option value="File23">File 23</option>
      <option value="File24">File 24</option>
      <option value="File25">File 25</option>
      <option value="File26">File 26</option>
      <option value="File27">File 27</option>
      <option value="File28">File 28</option>
      <option value="File29">File 29</option>
      <option value="File30">File 30</option>
      <option value="File31">File 31</option>
      <option value="File32">File 32</option>
      <option value="File33">File 33</option>
      <option value="File34">File 34</option>
      <option value="File35">File 35</option>
      <option value="File36">File 36</option>
      <option value="File37">File 37</option>
      <option value="File38">File 38</option>
      <option value="File39">File 39</option>
      <option value="File40">File 40</option>
      <option value="File41">File 41</option>
      <option value="File42">File 42</option>
      <option value="File43">File 43</option>
      <option value="File44">File 44</option>
      <option value="File45">File 45</option>
      <option value="File46">File 46</option>
      <option value="File47">File 47</option>
      <option value="File48">File 48</option>
      <option value="File49">File 49</option>
      <option value="File50">File 50</option>
      <option value="File51">File 51</option>
      <option value="File52">File 52</option>
      <option value="File53">File 53</option>
      <option value="File54">File 54</option>
      <option value="File55">File 55</option>
      <option value="File56">File 56</option>
      <option value="File57">File 57</option>
      <option value="File58">File 58</option>
      <option value="File59">File 59</option>
      <option value="File60">File 60</option>
      <option value="File61">File 61</option>
      <option value="File62">File 62</option>
      <option value="File63">File 63</option>
      <option value="File64">File 64</option>
      <option value="File65">File 65</option>
      <option value="File66">File 66</option>
      <option value="File67">File 67</option>
      <option value="File68">File 68</option>
      <option value="File69">File 69</option>
      <option value="File70">File 70</option>
      <option value="File71">File 71</option>
      <option value="File72">File 72</option>
      <option value="File73">File 73</option>
      <option value="File74">File 74</option>
      <option value="File75">File 75</option>
      <option value="File76">File 76</option>
      <option value="File77">File 77</option>
      <option value="File78">File 78</option>
      <option value="File79">File 79</option>
      <option value="File80">File 80</option>
      <option value="File81">File 81</option>
      <option value="File82">File 82</option>
      <option value="File83">File 83</option>
      <option value="File84">File 84</option>
      <option value="File85">File 85</option>
      <option value="File86">File 86</option>
      <option value="File87">File 87</option>
      <option value="File88">File 88</option>
      <option value="File89">File 89</option>
      <option value="File90">File 90</option>
      <option value="File91">File 91</option>
      <option value="File92">File 92</option>
      <option value="File93">File 93</option>
      <option value="File94">File 94</option>
      <option value="File95">File 95</option>
      <option value="File96">File 96</option>
      <option value="File97">File 97</option>
      <option value="File98">File 98</option>
      <option value="File99">File 99</option>
      <option value="File100">File 100</option>
      <option value="File101">File 101</option>
      <option value="File102">File 102</option>
      <option value="File103">File 103</option>
      <option value="File104">File 104</option>
      <option value="File105">File 105</option>
      <option value="File106">File 106</option>
      <option value="File107">File 107</option>
      <option value="File108">File 108</option>
      <option value="File109">File 109</option>
      <option value="File110">File 110</option>
      <option value="File111">File 111</option>
      <option value="File112">File 112</option>
      <option value="File113">File 113</option>
      <option value="File114">File 114</option>
      <option value="File115">File 115</option>
      <option value="File116">File 116</option>
      <option value="File117">File 117</option>
      <option value="File118">File 118</option>
      <option value="File119">File 119</option>
      <option value="File120">File 120</option>
      <option value="File121">File 121</option>
      <option value="File122">File 122</option>
      <option value="File123">File 123</option>
      <option value="File124">File 124</option>
      <option value="File125">File 125</option>
      <option value="File126">File 126</option>
      <option value="File127">File 127</option>
      <option value="File128">File 128</option>
      <option value="File129">File 129</option>
      <option value="File130">File 130</option>
      <option value="File131">File 131</option>
      <option value="File132">File 132</option>
      <option value="File133">File 133</option>
      <option value="File134">File 134</option>
      <option value="File135">File 135</option>
      <option value="File136">File 136</option>
      <option value="File137">File 137</option>
      <option value="File138">File 138</option>
      <option value="File139">File 139</option>
      <option value="File140">File 140</option>
      <option value="File141">File 141</option>
      <option value="File142">File 142</option>
      <option value="File143">File 143</option>
      <option value="File144">File 144</option>
      <option value="File145">File 145</option>
      <option value="File146">File 146</option>
      <option value="File147">File 147</option>
      <option value="File148">File 148</option>
      <option value="File149">File 149</option>
      <option value="File150">File 150</option>
      <option value="File151">File 151</option>
      <option value="File152">File 152</option>
      <option value="File153">File 153</option>
      <option value="File154">File 154</option>
      <option value="File155">File 155</option>
      <option value="File156">File 156</option>
      <option value="File157">File 157</option>
      <option value="File158">File 158</option>
      <option value="File159">File 159</option>
      <option value="File160">File 160</option>
      <option value="File161">File 161</option>
      <option value="File162">File 162</option>
      <option value="File163">File 163</option>
      <option value="File164">File 164</option>
      <option value="File165">File 165</option>
      <option value="File166">File 166</option>
      <option value="File167">File 167</option>
      <option value="File168">File 168</option>
      <option value="File169">File 169</option>
      <option value="File170">File 170</option>
      <option value="File171">File 171</option>
      <option value="File172">File 172</option>
      <option value="File173">File 173</option>
      <option value="File174">File 174</option>
      <option value="File175">File 175</option>
      <option value="File176">File 176</option>
      <option value="File177">File 177</option>
      <option value="File178">File 178</option>
      <option value="File179">File 179</option>
      <option value="File180">File 180</option>
      <option value="File181">File 181</option>
      <option value="File182">File 182</option>
      <option value="File183">File 183</option>
      <option value="File184">File 184</option>
      <option value="File185">File 185</option>
      <option value="File186">File 186</option>
      <option value="File187">File 187</option>
      <option value="File188">File 188</option>
      <option value="File189">File 189</option>
      <option value="File190">File 190</option>
      <option value="File191">File 191</option>
      <option value="File192">File 192</option>
      <option value="File193">File 193</option>
      <option value="File194">File 194</option>
      <option value="File195">File 195</option>
      <option value="File196">File 196</option>
      <option value="File197">File 197</option>
      <option value="File198">File 198</option>
      <option value="File199">File 199</option>
      <option value="File200">File 200</option>
    </select>
</div>

            
          
!
            
              body {
  background: #505a78;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

h2 {
  font-size: 30px;
  line-height: 1.5;
}

/* Components */
.menu {
  width: 18px;
  height: 2px;
  background: #2a3442;
  position: fixed;
  top: 24px;
  right: 24px;
}

.menu:before {
  content: ' ';
  display: block;
  width: 18px;
  height: 2px;
  background: #2a3442;
  margin-top: 4px;
}

.menu:after {
  content: ' ';
  display: block;
  width: 18px;
  height: 2px;
  background: #2a3442;
  margin-top: 2px;
}

/* Custom styles for searchbox generated by the plugin select2*/
.select2-container--default .select2-selection--single {
  border-radius: 24px;
  min-height: 50px;
  outline: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  padding-left: 44px;  
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAABGdBTUEAALGPC/xhBQAAA2FJREFUSA2tVU1IVFEUPufOa3TIv1JKpCwKo0WpmONMM04l9Ick1kgFbXKRFPSzCFpYUIugVYto15+rVpY6FpZFFOhozviHmVASBf3QohL8KdSZebdzJ+7zvtEZp+gt3jnnu98957xzzzsXIc7zZGho6dTE9G7k6OLI8xB4KgD7ihxGNM36oMpV/CXOVhOMJouMlsHBLH1qth6AnwYOtth1YSNSGIA2YKze67a/XogjMVOApq6gHXXdxznkScIiMoLIzno9Zdfj8YwAzR3B7Rz0diJSKeY/Imt6DL7KQIZXvOWOCyomdSaUtq6BNVSS+6QazoVDRLgFDLamZdrS8m2WFKs1ZQMyOEdFGpcOhOQ6P+/zB46omNSjGTV3Bhopu4NzIH4CC9R63Y7nElNlU0/PKgxBA5Vyl8QR8Huqla+vdDonJCYka+3oL1Sd0wmGAKEqnnOxqcbp/Jyam11F3BFhi4cDz5kJsTN/rLk3i2D40JxJGuJlr8cxZMIWMCoLCmYY8KNUgrBcpiCHpS4lcbj6mTMaZFyTi4vJAx5nPyX0TPKoEpvagsFcaQvJOGC+AryqLt84qdjJqH6VNBs2+aMeQVhuEBB+GHqSCvXamInKI1mqTW3Kv0mAumKl1JOWyFeoXM2S8kG1GR2SAvDC5kAgWyUsptPMqDA41IFpjmLFnzgDjo8NAoCFmvSSYidUfZ29O4mwTSENVSAaXSVwpmlaI8mIJFGZTrV09u6Qdjz5qKcnIwL6HXV8WBCvxvJZtWvLOxoJDXJBbNC57mvpCtZKLFbSWvH0LPipxY0OpNHyttptvxfLjY6Kh319OaFf4V6q51qVQL//U8awAXR9WEPLNH37ugjXq6nzjpPzJSYuQr8Fsypi2zwaQBB93X2b9XDkBf2Nf3XIahAaA90ay9yrBolOU0Ha7yodtiIro4jD5k3xLSrtpJi6cwzuCuvj7a3+N+kSMwIIYJ/H/n6Zx1ECyE7SCPgoSfMkwhjdZhfTbdpqukpPJApilGieEwKaXvaVQCjipiTzaKTQccAobRi1pacO7Ckq+in30GVVB8hvqB0ly5UwgHSQjFwwCKLvvwUQSTT5A8foRG7KLxFnZDqDZDJNxKkpd9wmp3WUdfRvpjv3biL+P6+JO77VHygVDn4DMoAmizLWHRYAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: 12px 14px;

}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
    right: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  top: -1px;
  padding-right: 16px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 12px 16px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
}

.select2-search__field:focus {
  outline: none; 
}

.select2-dropdown{
  border: 1px solid #2a3442;
}

.select2-results__options {
  background: #505a78;
  color: white;
}

.select2-results__option {
  padding: 12px 16px;
  border-bottom: 1px solid #2a3442;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #4592C4;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #276c98;
}

/* Functional classes */
.wrapper { width: 700px; max-width: 700px; }
.maven { font-family: 'Maven Pro', sans-serif; }
.no-underline { text-decoration: none;}
.center { text-align: center; }
.left { text-align: left; }
.relative { position: relative; }
.absolute {position: absolute ; }
.mt-0 { margin-top: 0; } 
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.mx-4 {
  margin-right: 4px;
  margin-left: 4px;
}
.py-12 { 
  padding-top: 12px;
  padding-bottom: 12px;
}
.px-20 { 
  padding-left: 20px;
  padding-right: 20px;
}
.dark { color: #505a78; }
.bg-dark { background: #505a78;}
.white { color: #fff;}
.bg-white { background: #fff; }



            
          
!
            
              $(document).ready(function() {
  $('.search').select2({
    placeholder: "Search File...",
    allowClear: true,
    width: '100%',
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console