I am trying to get select options to use monospace fonts so that they are lined up vertically when you click the drop down. I am trying to put a code left justified followed by a dash and then a description. I added the options using coded spaces so that each option has the same number of characters before the dash, but they still are not lined up. I tried courier new and monospace. I can tell it is using the fonts because they change, but they are still not lined up. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>font test</title>
<style>
select, option{
font-family:monospace, monospace;
}
</style>
</head>
<body>
<form>
<select name=SOURCECODE>
<option value="" selected>Select a Option</option>
<option value="A">A - TEST A</option>
<option value="AB">AB - TEST AB</option>
<option value="ABC">ABC - TEST ABC</option>
<option value="ABCD">ABCD - TEST ABCD</option>
<option value="A">A - TEST A</option>
<option value="AB">AB - TEST AB</option>
<option value="ABC">ABC - TEST ABC</option>
<option value="ABCD">ABCD - TEST ABCD</option>
</select>
</form>
</body>
</html>
Is there a way to make this work?
****Note this appears to only be a problem with firefox
Ok, reading throught several articles, it seems that this is a Mozilla Firefox's bug, and the font style cannot actually be set at the moment (as of 10.5.2018). I have personally tested on 59.0.2 and 60.0 on Windows 10 (x64), both have the same bug.
5 years old bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=910022
11 months old bug report (for BG color): https://bugzilla.mozilla.org/show_bug.cgi?id=1376443
SO question on the same topic: CSS Font-Family Support Dropped for <SELECT> in Firefox?
I have also noticed this writting in regards to option tag:
Firefox refuses to apply background-color to option tag on a select menu.
Problem encountered since Firefox 48 and +, on Windows 7, 8.1 and 10 (all x64)
Problem not encontered on Firefox 48 and +, on Windows XP 32 bits
Solutions that would usually work (but not working in this case):
changing font-family to monospace
adding tabs ( ) and <pre></pre> tags
as Kelvin Samuel noted, creating own custom Select might work (e.g. following this tutorial, see below working solution)
Working custom select from tutorial:
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
/*the container must be positioned relative:*/
.custom-select {
position: relative;
font-family: monospace;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.select-selected {
background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
<!--surround the select box within a "custom-select" DIV element.
Remember to set the width:-->
<div class="custom-select" style="width:200px;">
<select>
<option value="" selected>Select a Option</option>
<option value="A">A - TEST A</option>
<option value="AB">AB - TEST AB</option>
<option value="ABC">ABC - TEST ABC</option>
<option value="ABCD">ABCD - TEST ABCD</option>
<option value="A">A - TEST A</option>
<option value="AB">AB - TEST AB</option>
<option value="ABC">ABC - TEST ABC</option>
<option value="ABCD">ABCD - TEST ABCD</option>
</select>
</div>
Related
Is it possible to change the default background color of a select list option on hover?
HTML:
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I have tried option:hover { background-color: red; }, but it is of no use. Does anybody know how to do this?
This can be done by implementing an inset box shadow.
eg:
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
Here, .decorated is a class assigned to the select box.
Hope you got the point.
Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.
This way we can do this with minimal changes :)
option:hover {
background-color: yellow;
}
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Implementing an inset box shadow CSS works on Firefox:
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in Chrome:
select:focus > option:checked {
background: #000 !important;
}
There is test on https://codepen.io/egle/pen/zzOKLe
For me this is working on
Google Chrome
Version 76.0.3809.100 (Official Build) (64-bit)
Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
The problem is that even JavaScript does not see the option element being hovered. This is just to put emphasis on how it's not going to be solved (any time soon at least) by using just CSS:
window.onmouseover = function(event)
{
console.log(event.target.nodeName);
}
The only way to resolve this issue (besides waiting a millennia for browser vendors to fix bugs, let alone one that afflicts what you're trying to do) is to replace the drop-down menu with your own HTML/XML using JavaScript. This would likely involve the use of replacing the select element with a ul element and the use of a radio input element per li element.
Select / Option elements are rendered by the OS/Client, not HTML.
You cannot change the style for these elements in modern Browser.
On older clients
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in older Chrome:
select:focus > option:checked {
background: #000 !important;
}
Adding/toggling size attributes on focus event as suggestest by #Krishnaraj works pretty well on desktop using mouse controls.
However, the previous answers don't work well with keyboard controls.
The following example wraps the aforementioned state toggling into a javaScript helper function and adds additional event listeners for better accessibility
setSelectHover();
function setSelectHover(selector = "select") {
let selects = document.querySelectorAll(selector);
selects.forEach((select) => {
let selectWrap = select.parentNode.closest(".select-wrap");
// wrap select element if not previously wrapped
if (!selectWrap) {
selectWrap = document.createElement("div");
selectWrap.classList.add("select-wrap");
select.parentNode.insertBefore(selectWrap, select);
selectWrap.appendChild(select);
}
// set expanded height according to options
let size = select.querySelectorAll("option").length;
// adjust height on resize
const getSelectHeight = () => {
selectWrap.style.height = "auto";
let selectHeight = select.getBoundingClientRect();
selectWrap.style.height = selectHeight.height + "px";
};
getSelectHeight(select);
window.addEventListener("resize", (e) => {
getSelectHeight(select);
});
/**
* focus and click events will coincide
* adding a delay via setTimeout() enables the handling of
* clicks events after the select is focused
*/
let hasFocus = false;
select.addEventListener("focus", (e) => {
select.setAttribute("size", size);
setTimeout(() => {
hasFocus = true;
}, 150);
});
// close select if already expanded via focus event
select.addEventListener("click", (e) => {
if (hasFocus) {
select.blur();
hasFocus = false;
}
});
// close select if selection was set via keyboard controls
select.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
select.removeAttribute("size");
select.blur();
}
});
// collapse select
select.addEventListener("blur", (e) => {
select.removeAttribute("size");
hasFocus = false;
});
});
}
body {
font-size: 10vmin;
}
select {
--selectHoverCol: #999;
--selectedCol: red;
width: 100%;
font-size: 1em;
padding: 0.3em;
background-color: #fff;
}
select:focus {
border-radius: 0px;
border-color: red;
background: #fff;
outline: none;
}
.select-wrap {
position: relative;
}
.select-wrap:focus-within select {
position: absolute;
top: 0;
left: 0;
z-index: 10
}
option:hover {
background-color: var(--selectHoverCol);
color: #fff;
}
option:checked {
box-shadow: 0 0 1em 100px var(--selectedCol) inset;
}
<select class="selectHovercolor">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<p>paragraph</p>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="Lexus">Lexus</option>
<option value="Mercedes">Mercedes</option>
</select>
<p>paragraph</p>
The select field is wrapped in a <div> with relative position.
:focus-within pseudo state toggles the select positioning between absolute and initial (static) – this way we can avoid layout shifts.
the wraping div height is recalculated on resize
since the focus event coincides with with the click event, we add a delay for click events, triggering the select field to collapse after selection
If an option was selected via keyboard controls and selection was confirmed by pressing "enter" - the size attribute is removed.
size attribute is set according to the actual number of <option> elements
You can do this, just know that it will change all of the select inputs throughout the html, it doesn't change the blue hover, but it does style everything else.
option {
background: #1b1a1a !important;
color: #357b1d !important;
}
select {
background: #1b1a1a !important;
color: #357b1d !important;
}
// If you also want to theme your text inputs:
input {
background: #1b1a1a !important;
color: #357b1d !important;
}
<html>
<head>
<style>
option:hover {
background-color: yellow;
}
</style>
</head>
<body>
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
This worked for me in chrome!
<select onfocus='this.size=10;'>
<option>Crossing</option>
<option>Crossing Up</option>
<option>Crossing Down</option>
</select>
<style>
select option:hover {
box-shadow: 0 0 10px 100px green inset;
color:white;
}
select option:checked{
box-shadow: 0 0 10px 100px green inset;
}
</style>
However, the checked option's background will remain same even if i hover on another option
By the way, you can do that one as well.
Here is the link for that: https://www.w3schools.com/howto/howto_custom_select.asp
I would consider switching from a <select> element to a <div> list, like below:
https://jsfiddle.net/getbutterfly/gquh02dz/
This will make it cross-browser compatible. Every other method using CSS appearance tricks and <select> dropdowns is hacky.
HTML
<div class="sel">
<div class="label">Select option...</div>
<div class="options">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
<div>Lot of text to display, so it can expand multiple lines and expand the select main text also</div>
</div>
</div>
JavaScript
const sel = document.querySelector('.sel');
const label = document.querySelector('.label');
const options = document.querySelector('.options');
options.setAttribute('hidden', true);
sel.addEventListener('click', (e) => {
e.stopPropagation();
options.removeAttribute('hidden');
});
document.body.addEventListener('click', (e) => {
options.setAttribute('hidden', true);
});
options.addEventListener('click', (e) => {
if (e.target.tagName === 'DIV') {
e.stopPropagation();
label.textContent = e.target.textContent;
e.target.classList.add('selected');
Array.from(e.target.parentNode.children).forEach((child) => {
if (child !== e.target) {
child.classList.remove('selected');
}
});
options.setAttribute('hidden', true);
}
});
CSS
* {
box-sizing: border-box;
}
.sel {
color: #000000;
width: 250px;
box-sizing: border-box;
background-color: #ffffff;
border: 1px solid #000000;
overflow: hidden;
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat calc(100% - 10px) 14px;
}
.label,
.sel .options div {
padding: 10px;
}
.selected {
background-color: #ff0000;
}
.sel .options {
width: 250px;
background-color: #ffffff;
}
.sel .options div:hover {
background-color: #00ff00;
}
With a bit of extra CSS, the dropdown can be animated and the selected text can be truncated to fit inside a fixed height, behaving exactly like a <select> element.
I realise this is an older question, but I recently came across this need and came up with the following solution using jQuery and CSS:
jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);
and the css:
.highlight {
background-color:#333;
cursor:pointer;
}
Perhaps this helps someone else.
this is what you need, the child combinator:
select>option:hover
{
color: #1B517E;
cursor: pointer;
}
Try it, works perfect.
Here's the reference: http://www.w3schools.com/css/css_combinators.asp
When user write inside the input filed then show the suggestion of instuition name as per wrote inside input field .
Now , how can i solve this problem.
Thanks in advance.
I have done this type of thing before and it is really easy, all you need is an array of names in your JavaScript file, and then have a function that shows and displays those suggestions based on user input.
Here is an example:
// The names you want displayed as the user types
var instuitionNames = ["Techzilla", "Paragon Tech", "Mountain Hill Tech", "Example District Tech"];
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
// Start autocompletion
autocomplete(document.getElementById("myInput"), instuitionNames);
/* Just some example CSS */
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Instuition Name">
</div>
<input type="submit">
</form>
Reference: https://www.w3schools.com/howto/howto_js_autocomplete.asp
This question already has answers here:
How to style the option of an html "select" element?
(21 answers)
Closed 3 years ago.
ok i have code like this html
<div class="select_countries">
<select name="region" id="countries">
<option value="none" selected disabled hidden>Filter by Region</option>
<option value="all">All</option>
<option value="africa">Africa</option>
<option value="america">America</option>
<option value="asia">Asia</option>
<option value="europe">Europe</option>
<option value="oceania">Oceania</option>
</select>
</div>
i try on different ways to style list items and make gap between select menu and list items but i don't figure right way
[url=https://imge.to/i/5rw8i][img]https://b.imge.to/2019/07/20/5rw8i.jpg[/img][/url]
https://screenshot.net/dgp8of5
You are very limited in how browsers will apply padding within a select but one workaround is to set the appearance: none; along with its vendor prefixes.
This then allows you to use padding to your heart's content as below:
select
{
padding-bottom: 20px;
border: 1px solid #979997;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
<div class="select_countries">
<select name="region" id="countries">
<option value="none" selected disabled hidden>Filter by Region</option>
<option value="all">All</option>
<option value="africa">Africa</option>
<option value="america">America</option>
<option value="asia">Asia</option>
<option value="europe">Europe</option>
<option value="oceania">Oceania</option>
</select>
</div>
There isn't much you can do to style the actual dropdown menu (besides bolding the options), you can only style the form field (how it looks before you click it and the dropdown shows)
if you want a custom dropdown menu, you can do a custom solution like the one here:
https://components.fleeksite.com/select
W3Schools has example with HTML,JS,CSS
here
DEMO FROM W3schools
(EDITED With edit make gap too)
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
/*the container must be positioned relative:*/
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none;
/*hide original SELECT element:*/
}
.select-selected {
background-color: #2d3945;
border-radius: 2px;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: #2d3945;
top: 150%; /*Made Gap here*/
left: 0;
right: 0;
z-index: 99;
border: 1px solid rgba(61, 143, 253, 1);
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(61, 143, 253, 1);
}
<div class="custom-select" style="width:200px;">
<select name="region" id="countries">
<option value="none" selected disabled hidden>Filter by Region</option>
<option value="all">All</option>
<option value="africa">Africa</option>
<option value="america">America</option>
<option value="asia">Asia</option>
<option value="europe">Europe</option>
<option value="oceania">Oceania</option>
</select>
</div>
I don't know why but for some reason even when I use the most plained example, either regular HTML or bootstrap, the option list goes on top of the select control itself.
No idea why.
Help someone?
My code looks like this
<form>
<div class="form-group">
<select class="custom-select" id="sel1">
#foreach( $state in $stateList )
<option value="$state">$state</option>
#end
</select>
</div>
</form>
<select class="custom-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Both example gives back the same visual problem
enter image description here
This is going to look like a lot. But, here is an example with your code (only one select though). It isn't really a bootstrap solution its from W3c like your example.
You can try this:
var x, i, j, selElmnt, a, b, c;
/* Look for any elements with the class "custom-select": */
x = document.getElementsByClassName("test-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/* For each element, create a new DIV that will act as the selected item: */
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/* For each element, create a new DIV that will contain the option list: */
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/* For each option in the original select element,
create a new DIV that will act as an option item: */
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/* When an item is clicked, update the original select box,
and the selected item: */
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/* When the select box is clicked, close any other select boxes,
and open/close the current select box: */
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/* A function that will close all select boxes in the document,
except the current select box: */
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener("click", closeAllSelect);
/* The container must be positioned relative: */
.test-select {
position: relative;
font-family: Arial;
}
.test-select select {
display: none; /*hide original SELECT element: */
}
.select-selected {
background-color: DodgerBlue;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
<form>
<div class="form-group">
<div class="test-select">
<select class="custom-select">
<option value="0">Select car:</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
</form>
For example, I have something like this:
With the following HTML code, I set the max width of the entire dropdown to be 80%, which I expect to affect each of the options.
I want to have it so that long options wrap around at the max point:
Where the red lines indicate what is considered "one option", and thus when I hover over it, everything in between the red lines should be selected
<select name=countries style="width:100%;max-width:30%;">
<option value=gs selected="selected">All</option>
<option value=gs>This is fine</option>
<option value=gs>This message should wrap because it is very long</option>
<optgroup label="Title">
<option value="optcheck">Option groups are long, so they should wrap too</option>
</optgroup>
</select>
https://jsfiddle.net/pxl70474/x7w85fnm/
If you are using bootstrap you can use the bootstrap selectpicker class with the data-content attribute.
<select class="selectpicker form-control" data-live-search="true"
id="subject_teacher_drop_down">
<option data-content="English" title="English">English</option>
<option data-content="Methodology of social..." title="Methodology of social science
with special reference to economics">
Methodology of social science with special reference to economics
</option>
</select>
You could try rewriting it like this. I pulled this out of W3Schools. This simply writes the select menu for a responsive view. You could apply it for your site as it does wrap the text. Or figure out some other way to apply it to your site.
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 0; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
/*the container must be positioned relative:*/
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.select-selected {
background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
<div class="custom-select" style="width:500px;">
<select>
<option value="0">HTML5</option>
<option value="1">Option groups are long, so they should wrap too</option>
<optgroup label="Title">
<option value="optcheck">Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.</option>
</optgroup>
</select>
</div>
To make word wrap, try this css to extend height of container to make enough space to wrap text.
option {
max-width: 100%;
overflow: hidden;
word-wrap: normal !important;
white-space: normal;
}
This simple change worked for me.
option {
white-space: break-spaces;
}
Expanding on Pulin's answer
To get this to work in Firefox, I needed to target the :before pseudoelement:
option:before {
white-space: break-spaces;
}
This let my multi-select options take up more than one line of text!