auto-resize-custom-select
Version:
Auto resize drop-down select elements to match the width of the selected option and customize it with CSS
272 lines (259 loc) • 9.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>auto-resize-custom-select</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@10.5.0/styles/github-gist.min.css" />
<link rel="stylesheet" href="examples.css" />
</head>
<body>
<header>
<h1>auto-resize-custom-select</h1>
<h2>customSelect examples:</h2>
<p><label for="nocode"><input type="checkbox" name="nocode" id="nocode" /> Show/Hide Code</label></p>
</header>
<main>
<section>
<div>
<select class="default">
<option value="0">Default Style</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<span> </span>
<select class="default">
<option value="inline">Inline Selector</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="z">A Thousand Million...</option>
</select>
</div>
<pre><code class="language-css">/* No CSS (Default) */</code></pre>
</section>
<section>
<div>
<select class="beau-selecteur">
<option value="0">Beau Sélecteur</option>
<option value="1">un</option>
<option value="2">deux</option>
<option value="3">trois</option>
<option value="4">Option Plus Longue</option>
</select>
</div>
<pre><code class="language-css">.beau-selecteur {
border: solid #333 1px;
border-radius: 3px;
padding: .5rem 1rem;
}</code></pre>
</section>
<section>
<div>
<select class="win95">
<option value="win95">Windows 95</option>
<option value="ie">Internet Explorer 3.0</option>
<option value="oe">Outlook Express</option>
<option value="me">Microsoft Exchange</option>
<option value="dos">MS-DOS</option>
<option value="msn">MSN Messenger</option>
<option value="qt">Windows 95 QuickTime Program</option>
</select>
</div>
<pre><code class="language-css">.win95 {
border-top: solid #868b8f 2px;
border-left: solid #868b8f 2px;
border-bottom: solid #daddde 2px;
border-right: solid #daddde 2px;
box-shadow:
inset 2px 2px 0 0 #000002,
inset -2px -2px 0 0 #c3c4c6;
padding: 2px;
}
.win95 .selection {
padding: 2px 8px;
font-family: sans-serif;
text-decoration: none;
}
.win95 .arrow {
padding: 2px 8px;
background: #c2c7cb;
border-top: solid #c8c9cb 2px;
border-left: solid #c8c9cb 2px;
border-bottom: solid #000002 2px;
border-right: solid #000002 2px;
box-shadow:
inset 2px 2px 0 0 #fcffff,
inset -2px -2px 0 0 #868a8e;
}
.win95 .arrow:after {
content: '▾';
}</code></pre>
</section>
<section>
<div>
<select class="xp">
<option value="winXP">Windows XP</option>
<option value="2000">Windows 2000</option>
<option value="nt">Windows NT 4.0</option>
<option value="dos">MS-DOS</option>
<option value="xp">Windows XP Starter Edition</option>
</select>
</div>
<pre><code class="language-css">.xp {
background: #fff;
border: solid #859bb5 1px;
padding: 1px;
}
.xp .selection {
color: #4c5e88;
font-family: sans-serif;
text-decoration: none;
padding: 0 20px 0 8px;
}
.xp .arrow {
background-image: linear-gradient(135deg, #d5e2fd, #b3c9f9);
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.xp .arrow:after {
content: '';
display: block;
width: 19px;
height: 27px;
margin: 0 0 0 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E %3Cpath fill='none' stroke='%234c5e88' stroke-linecap='square' stroke-width='10' d='M10 10l20 20 20-20'/%3E %3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px auto;
}</code></pre>
</section>
<section>
<div>
<select class="aqua">
<option value="aqua">Aqua</option>
<option value="osx">Mac OS X 10.2 "Jaguar"</option>
<option value="a">Preferences.app</option>
<option value="b">Mail.app</option>
<option value="c">Preview.app</option>
<option value="d">TextEdit.app</option>
</select>
</div>
<pre><code class="language-css">.aqua {
background: #fff;
border: solid #6a96d5 2px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 10px -2px #6a96d5;
}
.aqua .selection {
font-family: sans-serif;
font-weight: 700;
text-decoration: none;
color: #5d5f6b;
padding: 4px 10px;
}
.aqua .arrow {
background-image: linear-gradient(180deg, #c0d7f1 0, #96beee 50%, #c2ecfd 100%);
border-left: solid #7fa9df 1px;
padding: 4px 8px;
}
.aqua .arrow:after {
color: #626262;
content: '▾';
}</code></pre>
</section>
<section>
<div>
<select class="aero">
<option value="aero">Aero</option>
<option value="vista">Windows Vista</option>
<option value="7">Windows 7</option>
<option value="8">Windows 8</option>
<option value="2012">Microsoft Windows Server 2012</option>
</select>
</div>
<pre><code class="language-css">.aero {
background-color: #eee;
background-image: linear-gradient(to bottom, #f1f1f1 0, #ececec 50%, #dedede 51%, #cfcfcf 100%);
border: solid #707070 1px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px #fff;
padding: 4px 6px;
color: #090000;
text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
.aero .selection {
font-family: sans-serif;
text-decoration: none;
padding: 0 10px 0 0;
}</code></pre></div>
</section>
<section>
<div>
<select class="metro">
<option value="metro">Metro</option>
<option value="mdl">Microsoft Design Language MDL</option>
<option value="ui">Modern UI</option>
</select>
</div>
<pre><code class="language-css">.metro {
border: solid #797979 2px;
padding: 8px 8px 8px 10px;
}
.metro .selection {
font-family: sans-serif;
text-decoration: none;
padding: 0 16px 0 0;
color: #555;
}
.metro .arrow:after {
content: '';
display: block;
width: 16px;
height: 16px;
margin: 0 0 0 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E %3Cpath fill='none' stroke='%23797979' stroke-linecap='square' stroke-width='10' d='M10 10l20 20 20-20'/%3E %3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 15px auto;
}</code></pre>
</section>
<section>
<div>
<select>
<option value="0">Script no applying</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</div>
<pre><code class="language-css">/* a select without the script */</code></pre>
</section>
</main>
<footer>
<ul>
<li><strong>More Info</strong>
<ul>
<li>GitHub : <a href="https://github.com/alterebro/auto-resize-custom-select">https://github.com/alterebro/auto-resize-custom-select</a></li>
<li>Docs : <a href="https://alterebro.github.io/auto-resize-custom-select/">https://alterebro.github.io/auto-resize-custom-select/</a></li>
<li>NPM : <a href="https://www.npmjs.com/package/auto-resize-custom-select">https://www.npmjs.com/package/auto-resize-custom-select</a></li>
</ul>
</li>
<li><strong>CDN's</strong>
<ul>
<li>unpkg : <a href="https://unpkg.com/auto-resize-custom-select">https://unpkg.com/auto-resize-custom-select</a></li>
<li>jsdelivr : <a href="https://cdn.jsdelivr.net/gh/alterebro/auto-resize-custom-select/dist/customSelect.min.js">https://cdn.jsdelivr.net/gh/alterebro/auto-resize-custom-select/dist/customSelect.min.js</a></li>
</ul>
</li>
</ul>
<p>
<strong>Jorge Moreno</strong> © 2021. <a href="https://twitter.com/alterebro">@<strong>alterebro</strong></a>
</p>
</footer>
<script src="https://unpkg.com/@highlightjs/cdn-assets@10.5.0/highlight.min.js"></script>
<script src="https://unpkg.com/auto-resize-custom-select"></script>
<script src="examples.js"></script>
</body>
</html>