I have made a dark mode button with my own dark theme. The theme is saved by Local Storage. Also when I click the button, then it's icon not change (moon to sun). But if I reload the page, the site is still in dark mode but the button icon's not changed. So heres a link which show you the problem if youo don't understant what i am talking about. codepen demo Also heres my code:
$(document).ready(function () {
$('body').toggleClass(localStorage.toggled);
$(".darkmode-btn").on("click", function(){
if (localStorage.toggled != 'dark') {
$('body').toggleClass('dark', true);
localStorage.toggled = "dark";
} else {
$('body').toggleClass('dark', false);
localStorage.toggled = "";
$(this).toggleClass("sun")
}
});
});
.dark{background-color: #222;}
.darkmode-btn {
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
font-size: 20px;
margin-left: 20px;
z-index: 100;
cursor: pointer;
background-color: #08f;
}
.darkmode-btn:before,.darkmode-btn.moon:before,.darkmode-btn.sun:before {
font-family: "fontawesome";
}
.darkmode-btn:before {
content: '\f186';
}
.darkmode-btn.moon:before {
content: '\f186';
}
.darkmode-btn.sun:before {
content: '\f185';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="darkmode-btn">
</div>
</body>
$(".darkmode-btn").on("click", function(){
if (localStorage.toggled != 'dark') {
$('body').toggleClass('dark', true);
localStorage.toggled = "dark";
$(this).addClass("moon").removeClass("sun")
} else {
$('body').toggleClass('dark', false);
localStorage.toggled = "";
//$(this).toggleClass("sun").removeClass("sun")
$(this).addClass("sun").removeClass("moon")
}
});
});
This should help you.
Related
I have This simple website that i need to make it change from light theme to dark theme, the light theme works fine, but the dark theme only changes its button properly because when i click in the button to change the "body" elements should change its class from "light-theme" to "dark-theme", instead it changes to "light-theme dark-theme"
here's HTML
`
<body class="light-theme">
<h1>Task List</h1>
<p id="msg">Current tasks:</p>
<ul>
<li class="list">Add visual styles</li>
<li class="list">add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
<div>
<button class="btn">Dark</button>
</div>
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site</noscript>
Heres CSS
:root {
--green: #00FF00;
--white: #FFFFFF;
--black: #000000;
}
.btn {
position: absolute;
top: 20px;
left: 250px;
height: 50px;
width: 50px;
border-radius: 50%;
border: none;
color: var(--btnFontColor);
background-color: var(--btnBg);
}
.btn:focus {
outline-style: none;
}
body {
background: var(--bg);
}
ul {
font-family: helvetica;
}
li {
list-style: circle;
}
.list {
list-style: square;
}
.light-theme {
--bg: var(--green);
--fontColor: var(--black);
--btnBg: var(--black);
--btnFontColor: var(--white);
}
.dark-theme{
--bg: var(--black);
--fontColor: var(--green);
--btnBg: var(--white);
--btnFontColor: var(--black);
}
and heres JavaScript
'use strict';
const switcher = document.querySelector('.btn');
switcher.addEventListener('click', function () {
document.body.classList.toggle('dark-theme')
var className = document.body.className;
if(className == "light-theme") {
this.textContent = "Dark";
} else {
this.textContent = "Light";
}
console.log('current class name: ' + className);
});
`
I tried to change some things in css but later found that the problem might be in the javascript, but my code is exactly as the code in my course is.
when i click in the button to change the "body" elements should change its class from "light-theme" to "dark-theme", instead it changes to "light-theme dark-theme"
That's indeed true - your JS code is only toggling the class "dark-theme" and does nothing with the "light-theme" class.
So a simple fix would be to toggle both classes:
switcher.addEventListener('click', function () {
document.body.classList.toggle('dark-theme')
document.body.classList.toggle('light-theme'); // add this line
var className = document.body.className;
if(className == "light-theme") {
this.textContent = "Dark";
} else {
this.textContent = "Light";
}
console.log('current class name: ' + className);
});
But you could simplify your code because you really don't need 2 classes here. If light theme is the default, just remove the light-theme class and all its CSS rules, and apply those to body instead. The .dark-theme rules will override these when the class is set, but not otherwise.
I am a javascript beginner and I am trying to integrate a simple light mode button. The default for my website is the dark mode. So the JS/CSS dark and light mode works fine. If the light mode is activated, the whole (external) CSS will be just replaced and it looks really great.
However here is my problem; The current mode of the CSS is not saved in the local storage. So when the user moves to the next HTML page, the default dark mode is back again.
I have already found many (really many) articles/forum posts etc. and tested a lot of sample codes (combined them etc.) but none of them worked for me.
Here is my JS code and a small part of my HTML/CSS. I've broken it up into individual snippets, because I assume that the snippet cannot visualize multiple HTML/CSS files, so you probably have to save and edit the pages locally.
Of course my question is; what do I need to change in the code so that the current Dark/LightMode setting is stored in the local storage and accessed on a page switch/reload etc.?
Thanks a lot for your effort in advance! :)
```
/* This is the light mode css */
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: white;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
text-shadow: 0px 0px 5px black;
margin: 40px 0 20px 0;
}
h2 {
font-size: 20px;
color: black;
text-align: center;
}
.btn-toggle {
background: white;
}
```
```
/* This is the dark mode css */
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
text-shadow: 0px 0px 5px black;
margin: 40px 0 20px 0;
}
h2 {
font-size: 20px;
color: white;
text-align: center;
}
.btn-toggle {
background: white;
}
```
```
<!-- this is the first HTML page -->
<!doctype html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="darkmode.css" id="theme-link">
</head>
<body>
<h1>Toggle Dark/lightmode example</h1>
<button class="btn-toggle">Toggle dark/light</button>
<button>Go to Site 2</button>
<h2>Unnecessary content</h2>
<script type="text/javascript" src="darkmode.js"></script>
```
```
<!-- this is the second page -->
<!doctype html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="darkmode.css" id="theme-link">
</head>
<body>
<h1>Toggle Dark/lightmode example</h1>
<button class="btn-toggle">Toggle dark/light</button>
<button>Go back to Site 1</button>
<h2>Unnecessary content</h2>
<script type="text/javascript" src="darkmode.js"></script>
<script>
// The JS file is usually eternally linked
// Select the button
const btn = document.querySelector(".btn-toggle");
// Select the stylesheet <link>
const theme = document.querySelector("#theme-link");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
document.body.classList.toggle("light-theme");
}
// Listen for a click on the button
btn.addEventListener("click", function() {
// If the current URL contains "dark-theme.css"
if (theme.getAttribute("href") == "kiblsstyle.css") {
// ... then switch it to "light-theme.css"
theme.href = "kiblsstylelight.css";
// Otherwise...
} else {
// ... switch it to "dark-theme.css"
theme.href = "kiblsstyle.css";
}
localStorage.setItem("theme", theme);
});
</script>
</body>
</html>
```
You shouldn´t try storing whole html element in local storage. Instead try storing theme name and then conditionally apply theme that you find in local storage. Here is your JS after clean up:
const btn = document.querySelector(".btn-toggle");
const styleLink = document.querySelector("#theme-link");
// Get stored theme with fallback value
const currentTheme = localStorage.getItem("theme") || "light";
if (currentTheme === "dark") styleLink.href = "kiblsstyle.css";
else if (currentTheme === "light") styleLink.href = "kiblsstylelight.css";
btn.addEventListener("click", () => {
if (styleLink.getAttribute("href") !== "kiblsstyle.css") {
styleLink.href = "kiblsstyle.css";
localStorage.setItem("theme", "dark");
} else {
styleLink.href = "kiblsstylelight.css";
localStorage.setItem("theme", "light");
}
});
localStorage was created to save simple, prinitive values and isn't intended to store DOM-elements. So you can just save boolean value in your case with just 2 themes. (When you'll create more of them, use few buttons or array, etc.) Or switch theme title but don't use DOM-object
localStorage article
const theme = document.querySelector("#theme-link");
const currentLightTheme = localStorage.getItem("isLight") || true;
btn.addEventListener("click", function() {
if (!currentLightTheme) {
theme.setAttribute('href', 'kiblsstylelight.css');
} else {
theme.setAttribute('href', 'kiblsstyle.css');
}
localStorage.setItem('isLight', !currentLightTheme)
});
I'm trying to accomplish a few things to get dark mode working on my site.
Use a checkbox to switch between light and dark themes (the checkbox will set the data-theme attribute to user's preference). Here't the js below
function detectColorScheme() {
var theme="light";
//default to light
//local storage is used to override OS theme settings
if(localStorage.getItem("theme")){
if(localStorage.getItem("theme") == "dark"){
var theme = "dark";
}
} else if(!window.matchMedia) {
//matchMedia method not supported
return false;
} else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
//OS theme setting detected as dark
var theme = "dark";
}
//dark theme preferred, set document with a `data-theme` attribute
if (theme=="dark") {
document.documentElement.setAttribute("data-theme", "dark");
}
}
detectColorScheme();
//identify the toggle switch HTML element
const themeSwitch = document.getElementById('hm-theme-switch-toggle');
//function that changes the theme, and sets a localStorage variable to track the theme between page loads
function switchTheme(e) {
if (e.target.checked) {
localStorage.setItem('theme', 'dark');
document.documentElement.setAttribute('data-theme', 'dark');
themeSwitch.checked = true;
} else {
localStorage.setItem('theme', 'light');
document.documentElement.setAttribute('data-theme', 'light');
themeSwitch.checked = false;
}
}
//listener for changing themes
themeSwitch.addEventListener('change', switchTheme, false);
//pre-check the dark-theme checkbox if dark-theme is set
if (document.documentElement.getAttribute("data-theme") == "dark"){
themeSwitch.checked = true;
}
My html and css is setup that I have a pseudo element to change the text if the checkbox is checked, along with the entire theme changing to dark mode. For some reason it's not firing though even though I have the label pointed to the input id and the correct id is called in js.
<div class="hm-theme-switch-wrapper">
<input type="checkbox" class="hm-theme-toggle" id="hm-theme-switch-toggle" name="hm-checkbox" />
<label for="hm-theme-switch-toggle" id="hm-theme-switch" style="text-align:right;"><i class="hm-theme-state-icon"></i><span>Dark</span></label>
</div>
.hm-theme-switch-wrapper {
background-color: none;
border-radius: 150px;
border: 2px solid var(--hm-color-text);
overflow: auto;
float: right;
width: 100px;
label {
display: flex;
align-items: center;
padding: 5px 10px;
margin: 0;
}
input.hm-theme-toggle {
display: none;
}
input#hm-theme-switch-toggle:checked + label span {
display: none;
}
input#hm-theme-switch-toggle:checked + label:after {
content: "Light";
}
.hm-theme-state-icon {
background-image : url(https://michaelcraig.design/wp-content/uploads/2021/04/light_dark.svg);
background-size: cover;
display: inline-block;
height: 20px;
width: 20px;
margin-right: 10px;
}
.hm-theme-state {
text-align:center;
display:block;
border-radius:4px;
color: var(--hm-color-text);
font-size: 16px;
font-weight: 600;
}
}
I appreciate any help and suggestions. You can also view this live # https://michaelcraig.design
Try put this lines:
const themeSwitch = document.getElementById("hm-theme-switch-toggle");
themeSwitch.addEventListener("change", switchTheme, false);
.. inside a ready trigger:
$(document).ready(function(){
const themeSwitch = document.getElementById("hm-theme-switch-toggle");
themeSwitch.addEventListener("change", switchTheme, false);
});
Maybe DOM is not ready when getElementById run.
Edit: Since OP is not using jQuery, here's the vanilla JS equivalent:
document.addEventListener('DOMContentLoaded', () => {
const themeSwitch = document.getElementById("hm-theme-switch-toggle");
themeSwitch.addEventListener("change", switchTheme, false);
});
I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.
Relevant code:
Select chunk of form:
<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>
Manipulating selects (arrays defined earlier):
function rankFeatures(create) {
var $optionList = $("#optionList");
var $ranks = $("#ranks");
if(create == true) {
for(i=0; i<5; i++){
$optionList.append(features[i]);
};
}
else {
var index = $optionList.val();
$('#optionList option:selected').remove();
$ranks.append(features[index]);
};
}
This all works. It all falls apart when I try to deal with hovering over options:
$(document).ready(
function (event) {
$('select').hover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
I found that code while searching through Stack Exchange, yet I am having no luck getting it to work. The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away. If I close out with the mouse a second alert window pops up. Just moving the mouse around the select occasionally results in an alert box popping up.
I have tried targeting the options directly, but have had little success with that. How do I get the alert to pop up if I hover over an option?
You can use the mouseenter event.
And you do not have to use all this code to check if the element is an option.
Just use the .on() syntax to delegate to the select element.
$(document).ready(function(event) {
$('select').on('mouseenter','option',function(e) {
alert('yeah');
// this refers to the option so you can do this.value if you need..
});
});
Demo at http://jsfiddle.net/AjfE8/
try with mouseover. Its working for me. Hover also working only when the focus comes out from the optionlist(like mouseout).
function (event) {
$('select').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
You don't need to rap in in a function, I could never get it to work this way. When taking it out works perfect. Also used mouseover because hover is ran when leaving the target.
$('option').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
console.log('yeah!');
};
})
Fiddle to see it working. Changed it to console so you don't get spammed with alerts. http://jsfiddle.net/HMDqb/
That you want is to detect hover event on option element, not on select:
$(document).ready(
function (event) {
$('#optionList option').hover(function(e) {
console.log(e.target);
});
})
I have the same issue, but none of the solutions are working.
$("select").on('mouseenter','option',function(e) {
$("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
$("#show-me").hide();
});
$("option").mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
});
Here my jsfiddle https://jsfiddle.net/ajg99wsm/
I would recommend to go for a customized variant if you like to ease
capture hover events
change hover color
same behavior for "drop down" and "all items" view
plus you can have
resizeable list
individual switching between single selection and multiple selection mode
more individual css-ing
multiple lines for option items
Just have a look to the sample attached.
$(document).ready(function() {
$('.custopt').addClass('liunsel');
$(".custopt, .custcont").on("mouseover", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "block")
} else {
$(this).addClass("lihover");
}
})
$(".custopt, .custcont").on("mouseout", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "none")
} else {
$(this).removeClass("lihover");
}
})
$(".custopt").on("click", function(e) {
$(".custopt").removeClass("lihover");
if ($("#btsm").val() == "ssm") {
//single select mode
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
$(this).removeClass("liunsel");
$(this).addClass("lisel");
} else if ($("#btsm").val() == "msm") {
//multiple select mode
if ($(this).is(".lisel")) {
$(this).addClass("liunsel");
$(this).removeClass("lisel");
} else {
$(this).addClass("lisel");
$(this).removeClass("liunsel");
}
}
updCustHead();
});
$(".custbtn").on("click", function() {
if ($(this).val() == "ssm") {
$(this).val("msm");
$(this).text("switch to single-select mode")
} else {
$(this).val("ssm");
$(this).text("switch to multi-select mode")
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
}
updCustHead();
});
function updCustHead() {
if ($("#btsm").val() == "ssm") {
if ($(".lisel").length <= 0) {
$("#hrnk").text("current selected option");
} else {
$("#hrnk").text($(".lisel").text());
}
} else {
var numopt = +$(".lisel").length,
allopt = $(".custopt").length;
$("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
}
}
});
body {
text-align: center;
}
.lisel {
background-color: yellow;
}
.liunsel {
background-color: lightgray;
}
.lihover {
background-color: coral;
}
.custopt {
margin: .2em 0 .2em 0;
padding: .1em .3em .1em .3em;
text-align: left;
font-size: .7em;
border-radius: .4em;
}
.custlist,
.custhead {
width: 100%;
text-align: left;
padding: .1em;
border: LightSeaGreen solid .2em;
border-radius: .4em;
height: 4em;
overflow-y: auto;
resize: vertical;
user-select: none;
}
.custlist {
display: none;
cursor: pointer;
}
.custhead {
resize: none;
height: 2.2em;
font-size: .7em;
padding: .1em .4em .1em .4em;
margin-bottom: -.2em;
width: 95%;
}
.custcont {
width: 7em;
padding: .5em 1em .6em .5em;
/* border: blue solid .2em; */
margin: 1em auto 1em auto;
}
.custbtn {
font-size: .7em;
width: 105%;
}
h3 {
margin: 1em 0 .5em .3em;
font-weight: bold;
font-size: 1em;
}
ul {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
<div>
<button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
</div>
<div id="hrnk" class="custhead">
current selected option
</div>
<ul id="ranks" class="custlist">
<li class="custopt">option one</li>
<li class="custopt">option two</li>
<li class="custopt">another third long option</li>
<li class="custopt">another fourth long option</li>
</ul>
</div>
I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.
Relevant code:
Select chunk of form:
<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>
Manipulating selects (arrays defined earlier):
function rankFeatures(create) {
var $optionList = $("#optionList");
var $ranks = $("#ranks");
if(create == true) {
for(i=0; i<5; i++){
$optionList.append(features[i]);
};
}
else {
var index = $optionList.val();
$('#optionList option:selected').remove();
$ranks.append(features[index]);
};
}
This all works. It all falls apart when I try to deal with hovering over options:
$(document).ready(
function (event) {
$('select').hover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
I found that code while searching through Stack Exchange, yet I am having no luck getting it to work. The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away. If I close out with the mouse a second alert window pops up. Just moving the mouse around the select occasionally results in an alert box popping up.
I have tried targeting the options directly, but have had little success with that. How do I get the alert to pop up if I hover over an option?
You can use the mouseenter event.
And you do not have to use all this code to check if the element is an option.
Just use the .on() syntax to delegate to the select element.
$(document).ready(function(event) {
$('select').on('mouseenter','option',function(e) {
alert('yeah');
// this refers to the option so you can do this.value if you need..
});
});
Demo at http://jsfiddle.net/AjfE8/
try with mouseover. Its working for me. Hover also working only when the focus comes out from the optionlist(like mouseout).
function (event) {
$('select').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
You don't need to rap in in a function, I could never get it to work this way. When taking it out works perfect. Also used mouseover because hover is ran when leaving the target.
$('option').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
console.log('yeah!');
};
})
Fiddle to see it working. Changed it to console so you don't get spammed with alerts. http://jsfiddle.net/HMDqb/
That you want is to detect hover event on option element, not on select:
$(document).ready(
function (event) {
$('#optionList option').hover(function(e) {
console.log(e.target);
});
})
I have the same issue, but none of the solutions are working.
$("select").on('mouseenter','option',function(e) {
$("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
$("#show-me").hide();
});
$("option").mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
});
Here my jsfiddle https://jsfiddle.net/ajg99wsm/
I would recommend to go for a customized variant if you like to ease
capture hover events
change hover color
same behavior for "drop down" and "all items" view
plus you can have
resizeable list
individual switching between single selection and multiple selection mode
more individual css-ing
multiple lines for option items
Just have a look to the sample attached.
$(document).ready(function() {
$('.custopt').addClass('liunsel');
$(".custopt, .custcont").on("mouseover", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "block")
} else {
$(this).addClass("lihover");
}
})
$(".custopt, .custcont").on("mouseout", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "none")
} else {
$(this).removeClass("lihover");
}
})
$(".custopt").on("click", function(e) {
$(".custopt").removeClass("lihover");
if ($("#btsm").val() == "ssm") {
//single select mode
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
$(this).removeClass("liunsel");
$(this).addClass("lisel");
} else if ($("#btsm").val() == "msm") {
//multiple select mode
if ($(this).is(".lisel")) {
$(this).addClass("liunsel");
$(this).removeClass("lisel");
} else {
$(this).addClass("lisel");
$(this).removeClass("liunsel");
}
}
updCustHead();
});
$(".custbtn").on("click", function() {
if ($(this).val() == "ssm") {
$(this).val("msm");
$(this).text("switch to single-select mode")
} else {
$(this).val("ssm");
$(this).text("switch to multi-select mode")
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
}
updCustHead();
});
function updCustHead() {
if ($("#btsm").val() == "ssm") {
if ($(".lisel").length <= 0) {
$("#hrnk").text("current selected option");
} else {
$("#hrnk").text($(".lisel").text());
}
} else {
var numopt = +$(".lisel").length,
allopt = $(".custopt").length;
$("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
}
}
});
body {
text-align: center;
}
.lisel {
background-color: yellow;
}
.liunsel {
background-color: lightgray;
}
.lihover {
background-color: coral;
}
.custopt {
margin: .2em 0 .2em 0;
padding: .1em .3em .1em .3em;
text-align: left;
font-size: .7em;
border-radius: .4em;
}
.custlist,
.custhead {
width: 100%;
text-align: left;
padding: .1em;
border: LightSeaGreen solid .2em;
border-radius: .4em;
height: 4em;
overflow-y: auto;
resize: vertical;
user-select: none;
}
.custlist {
display: none;
cursor: pointer;
}
.custhead {
resize: none;
height: 2.2em;
font-size: .7em;
padding: .1em .4em .1em .4em;
margin-bottom: -.2em;
width: 95%;
}
.custcont {
width: 7em;
padding: .5em 1em .6em .5em;
/* border: blue solid .2em; */
margin: 1em auto 1em auto;
}
.custbtn {
font-size: .7em;
width: 105%;
}
h3 {
margin: 1em 0 .5em .3em;
font-weight: bold;
font-size: 1em;
}
ul {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
<div>
<button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
</div>
<div id="hrnk" class="custhead">
current selected option
</div>
<ul id="ranks" class="custlist">
<li class="custopt">option one</li>
<li class="custopt">option two</li>
<li class="custopt">another third long option</li>
<li class="custopt">another fourth long option</li>
</ul>
</div>