Menu
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
732
The <tt> HTML element creates inline text which is presented using the user agent's default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.
To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
The select tag in HTML is used to create a dropdown list of options that can be selected. The option tag contains the value that would be used when selected. The default value of the select element can be set by using the 'selected' attribute on the required option. This is a boolean attribute.
To change or set a font style for certain text, the fontFamily CSS property needs to be changed. The fontFamily property sets or returns a list of font-family names for text in an element. To change the font style by option dropdown: The font values can be passed in option tags using option value.
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.
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):
	) and <pre></pre> tagsWorking 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
