Skip to content

Instantly share code, notes, and snippets.

@adamjs

adamjs/select_example.html

Created January 4, 2020 18:41
Show Gist options
  • Save adamjs/6e227ca4adc620742b3a3dab27bc38d8 to your computer and use it in GitHub Desktop.
Save adamjs/6e227ca4adc620742b3a3dab27bc38d8 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using JavaScript/CSS to render <select> elements in Ultralight.
Raw
select_example.html
<!-- This is an example of using themeable JavaScript replacements to style
<select> elements in Ultralight.
-->
<html>
<head>
<link href="https://unpkg.com/mobius1-selectr@latest/dist/selectr.min.css"
rel="stylesheet" type="text/css">
<script src="https://unpkg.com/mobius1-selectr@latest/dist/selectr.min.js"
type="text/javascript"></script>
<style>
body {
font-family: -apple-system, 'Segoe UI', Ubuntu, sans-serif;
}
#myForm {
width: 300px;
margin: 1em auto;
background: #EEE;
padding: 3em;
border-radius: 1em;
}
/**********************************************************************
* Use SVG arrows instead of CSS border-color hack so it renders
* correctly in Ultralight 1.1
**********************************************************************/
.selectr-selected::before {
width: 10px;
height: 5px;
border: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='5' width='10'><polygon points='0,0 5,5 10,0' style='fill:grey;stroke:none;'/></svg>");
}
.selectr-container.native-open .selectr-selected::before,
.selectr-container.open .selectr-selected::before {
border: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='5' width='10'><polygon points='0,5 5,0 10,5' style='fill:grey;stroke:none;'/></svg>");
}
</style>
</head>
<body>
<div id="myForm">
<h3>Select Manufacturer:</h3>
<select id="selectManufacturer">
<option value="honda">Honda</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="toyota">Toyota</option>
<option value="volkswagen">Volkswagen</option>
<option value="hyundai">Hyundai</option>
</select>
<h3>Select Color:</h3>
<select id="selectColor">
<option value="white">White</option>
<option value="black">Black</option>
<option value="silver">Silver</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
</div>
<script>
// Apply 'Selectr' JavaScript replacement to all 'select' elements
var x = document.body.querySelectorAll("select");
var i;
for (i = 0; i < x.length; i++) {
// You can enable search here if you want.
new Selectr(x[i], { searchable: false });
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment