HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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%',
});
});
Also see: Tab Triggers