How to Put a Space Character Before Option Text in a HTML Select Element

How do I put a space character before option text in a HTML select element?

Isn't   the entity for space?

<select>
<option> option 1</option>
<option> option 2</option>
</select>

Works for me...

EDIT:

Just checked this out, there may be compatibility issues with this in older browsers, but all seems to work fine for me here. Just thought I should let you know as you may want to replace with  

Preserving white space in an HTML select option

You need to replace the spaces with   and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.

You should also apply a font-family: CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.

how to preserve space in HTML select option list<option value='hi this'>hi</option>

You should wrap value of attribute value in quote(Quote It). If you do not wrap them in quote then value after space will be considered as attribute itself:

$("#<%=listBrand.ClientID%>").append("<option value='"+ item.Brand + "'>" + item.Brand + "</option>");

Insert space to dynamically created select option element before text

Here is solution, if someone need this:

$('select#optionsto > option.city').each(function () {
$(this).prepend("   ");
});

How to display multiple spaces in HTML select list <option></option>

Use   (normally you shouldn't use this for spacing, but you don't have many more options in <select> elements):

<select id="list">
<option>one space</option>
<option>two  spaces</option>
<option>three   spaces</option>
</select>

Updated Fiddle

Text Padding in Select Boxes

Unfortunately, this extra whitespace is added by the browser's rendering engine. Form element rendering is inconsistent across browsers, and in this case is not determined by CSS.

Take a look at this article from Mozilla explaining some ways to mitigate select box incosistency, then you might read this article from Smashing Magazine about styling form elements (be sure to check out the comments and the problems people have had with selects).

Edit 2020: I stumbled across this article from Chris Coyer at CSS-Tricks that appears to show some styling that you can apply to select elements that may help some folks out. It appears overriding the browser's default styling allows you a little more freedom than I was aware of when I posted this answer several years go, according to Liliana Brissos on Team Treehouse.

HTML select option text monospace

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 Topics



Leave a reply



Submit