| MFSelector / beta / demo / demo1.html file last updated : 2023-08-30 |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Methodfish Styled Selector</title>
<link rel="icon" type="image/png" href="https://methodfish.com/images/methodfish.ico">
<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Courier+Prime|Roboto|Material+Icons|Material+Icons+Outlined&display=block">
<script src="../js/mf-styled-select.js"></script>
<link href="../css/mf-styled-select.css" rel="stylesheet preload prefetch" as="style">
<style>
body {
background-color: #84849f;
}
select {
font-family:Roboto;
font-size:12pt;
width:100%;
padding-top:4px;
padding-bottom:4px;
width:calc(100vw - 50px);
height:25px!important;
line-height:19px;
}
.mf-ddlb {
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.mf-ddlb > .mf-option {
height: 19px;
padding: 8px 0 0 10px!important;
border-top: solid 1px #ccbdbd !important;
line-height: 13px!important;
}
</style>
</head>
<body>
<select class="mf-select" placeholder="{col silver}Select an ///option///{/col}">
<option>aaa **bold**</option>
<option>cccc {col Green}///Green italic///{/col}</option>
<option>dddd {col Red}Red{/col}</option>
<option>eeee {col LightSlateGray}LightSlateGray{/col}</option>
<option>ffff {col #c5c2c2}#c5c2c2{/col}</option>
</select>
<script>
new mfSelector().init();
</script>
</body>
</html>Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/image-zoomingsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnDataBarsquareprojects/MFColumnGradientsquareprojects/MFCropCornerUIsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquareprojects/MFShowConsolesquare