I have an HTML select which has items like the below.

<SELECT id="mylist" size=5 >
   <OPTION Value="100">100</OPTION>
   <OPTION Value="200">200</OPTION>
   <OPTION Value="210">210</OPTION>
   <OPTION Value="211">211</OPTION>
</SELECT>

Now if I click inside the SELECT and type 21 then it will select the item 210 which is the first item starts with 21. All good.

Later I wanted to add a padding to the left of the item as requested by the client. But soon I realized that padding in SELECT will not work in IE (at least on IE6 and IE7 which I tested)

So I added   

<SELECT id="mylist" size=5 >
   <OPTION Value="100">&nbsp;&nbsp;100</OPTION>
   <OPTION Value="200">&nbsp;&nbsp;200</OPTION>
   <OPTION Value="210">&nbsp;&nbsp;210</OPTION>
   <OPTION Value="211">&nbsp;&nbsp;211</OPTION>
</SELECT>

Now I can mimic padding.

But I lost the search option. It will not select 210 when I type 21 in IE. It works well in chrome. Please share your thoughts.

Find the sample here

I have an HTML select which has items like the below.

<SELECT id="mylist" size=5 >
   <OPTION Value="100">100</OPTION>
   <OPTION Value="200">200</OPTION>
   <OPTION Value="210">210</OPTION>
   <OPTION Value="211">211</OPTION>
</SELECT>

Now if I click inside the SELECT and type 21 then it will select the item 210 which is the first item starts with 21. All good.

Later I wanted to add a padding to the left of the item as requested by the client. But soon I realized that padding in SELECT will not work in IE (at least on IE6 and IE7 which I tested)

So I added   

<SELECT id="mylist" size=5 >
   <OPTION Value="100">&nbsp;&nbsp;100</OPTION>
   <OPTION Value="200">&nbsp;&nbsp;200</OPTION>
   <OPTION Value="210">&nbsp;&nbsp;210</OPTION>
   <OPTION Value="211">&nbsp;&nbsp;211</OPTION>
</SELECT>

Now I can mimic padding.

But I lost the search option. It will not select 210 when I type 21 in IE. It works well in chrome. Please share your thoughts.

Find the sample here

• javascript
• html
• css
• padding
• html-select

• 5 Sometimes your IE users are just gonna have to suffer. Me personally, I punish IE 6 users and make my site looks as bad as possible for them :) but can't you wrap the select options in a span, and then use relative positioning to bump them over? ***Disclaimer: this is not a semantic solution. Unfortunately you have to do some hacking sometime with IE. – Mike Legacy Commented Jul 19, 2012 at 16:23
• already tried that also. But IE is resisting that also :) – PraveenVenu Commented Jul 19, 2012 at 16:26
• Do you have a live version set up anywhere? – Chad Commented Jul 19, 2012 at 17:31
• 2 Especially in IE6, select are from outer space (as in "a select will appear above a Flash object (and ignore 'z-indexed' elements like a Lightbox); you've to disable it first. WTF??") so if you can't style them, forget the idea and make a choice between a minor design issue on deprecated browsers and a feature that powerusers use a lot (autocomplete/search in select). There I made the choice for you :) – FelipeAls Commented Jul 22, 2012 at 12:02
• 2 Note: if left padding is there to show some sort of hierarchy between different options like in an hierarchical tree, then use optgroup, that's the semantics and accessible way of doing it (see W3C WCAG 2.0 Technique H85) – FelipeAls Commented Jul 22, 2012 at 12:06

10 Answers 10

How about wrapping it in a div:

HTML:

<div class="listwrapper">
    <SELECT id="mylist" size=5 >
        <OPTION Value="100">100</OPTION>
        <OPTION Value="200">200</OPTION>
        <OPTION Value="210">210</OPTION>
        <OPTION Value="211">211</OPTION>
    </SELECT>
</div>​

CSS:

.listwrapper
{
    padding: 0px 0px 0px 15px;
    border: solid 1px silver;
    width: 50px;
}
.listwrapper select,
.listwrapper select:active
{
    border: none 0px white;
    width: 50px;
}
​

My Fiddle

Try to use align in CSS

​select { width:auto; }
option { text-align:center; }

This actually work. Here is the proof in jsfiddle

<style> is an inline element hence adding a padding will not work in IE6 however with display:block; this can be overcome

use

<style>
    #mylist
{
    padding-left:10px;
    display:block;
}
</style>​ 

Hope this helps helps. Fiddle here

Yes, the answer by Vijay is the correct way. We should always use CSS rather than any other.

Here is the example :-

<select  size="10" style="text-align:center">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Four</option>
</select>

Putting the size is not mandatory .

Hope it is help full.

give left padding required to move options

#mylist
{
  padding-left: 10px;
}

check this fiddle

The javascript code, which overrides browser search can be like this. See the run code snippet, for example.

if (!dimon) {
	var dimon = {};
}
if (!dimon.select) {
	dimon.select = {
		/**
		 * Contains last typed character, and last selected option value
		 * (integer). For example, { "AlternativeMobileSelectionMenu" : { "char" :
		 * "s", "index" : 115 }, "AlternativeTariffSelectionMenu" : { "char" :
		 * "a", "index" : 0 } }
		 */
		hist : {},
		search : function(select, e) {
			// JQuery select object
			var select = $(select);
			if (!select) {
				return;
			}
			// id of HTML select, which is located under 0 index
			var sid = select[0].id;

			// dynamic HTML event
			e = e || window.event;
			var keycode = e.which || e.keyCode;
			keycode = String.fromCharCode(keycode);
			// Search should be case-insensitive
			keycode = keycode.toLowerCase();

			if (keycode < 'a' && keycode > 'z') {
				// handle only alphabetic character is typed
				return;
			}

			// Prevent default browser behavior
			if (e.preventDefault) {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}

			if (!this.hist[sid]) {
				this.hist[sid] = {};
			}
			var lastChar = this.hist[sid]['char'];
			if (keycode != lastChar) {
				// if a new character is typed, reset
				// last typed character
				this.hist[sid]['char'] = '';
				// and last selected option
				this.hist[sid]['index'] = -1;
			}

			// options which matches the input character
			var filteredOptions = new Array();
			// all select options
			var options = select.find("option");

			for (var i = 0; i < options.length; i++) {

				var opt = $(options[i]);
				// Example option text
				// "  30|25   █ Magenta Mobil L mit Top-Handy"
				// "                  Sony Xperia Z2 schwarz (1,00 EUR)"
				var text = opt.text().toLowerCase();

				// Regular expression finds the first alphabetic character
				var regexp = new RegExp("[^a-z]*([a-z]{1}).*", "i");
				var result = regexp.exec(text);
				// the output will be:
				// 'm'
				// 's'
				text = result != null ? result[1] : '';

				if (opt.val() != '' && text.indexOf(keycode) == 0) {
					// add option value, if it matches
					filteredOptions.push(opt.val());
				}
			}

			var size = filteredOptions.length;
			if (size == 0) {
				return;
			}

			// Example, if we have 2 mobile devices in the list
			// Samsung Galaxy S5
			// Sony Xperia Z2
			// and type 'S', then Samsung will be selected,
			// if we type 'S' for the second time, then Sony will be selected,
			// and if we type 'S' once again, then Samsung will be selected
			// again.
			// value of the first suitable option
			var firstOpt = parseInt(filteredOptions[0]);
			// value of the last suitable option
			var lastOpt = parseInt(filteredOptions[size - 1]);
			// Last selected option value
			var lastSelected = this.hist[sid]['index'];

			if (lastSelected == -1) {
				// Character is typed for the first time
				this.hist[sid]['char'] = keycode;
				this.hist[sid]['index'] = firstOpt;
				select.val(this.hist[sid]['index']);
				select.change();

			} else if (lastSelected >= 0 && lastSelected < lastOpt) {
				// The same character is typed, just increment the option value
				this.hist[sid]['index'] = lastSelected + 1;
				select.val(this.hist[sid]['index']);
				select.change();

			} else if (lastSelected >= 0 && lastSelected == lastOpt) {
				// The same character is typed, but the last suitable option was
				// already selected before.
				// So select the first option again
				this.hist[sid]['index'] = firstOpt;
				select.val(this.hist[sid]['index']);
				select.change();
			}
		}
	}
}

<html>
<head>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
	<select id="devices" size="1"
		onkeypress="dimon.select.search(this, event)">
		<option value="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apple iPhone
			5s 64GB Gold (199,95 EUR)</option>
		<option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Samsung
			Galaxy S5 LTE+ weiß (1,00 EUR)</option>
		<option value="2">&nbsp;30|25&nbsp;█&nbsp;Sony Xperia Z2
			Tablet LTE+ (19,95 EUR)</option>
		<option value="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 schwarz (1,00 EUR)</option>
		<option value="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 weiß (1,00 EUR)</option>
	</select>
</body>
</html>

Use &nbsp to get the proper padding in IE and use key event to select the items based on key pressed.

This could be part of your issue with IE6/7:

IE's Default CSS Values

Dumb place to put default CSS values. IE8 and newer doesn't seem to have this issue.

I've made this, I assume that you want something like this : MyFiddle

<style>
    option {
    width: 40px;
    text-align: center;
    }
</style>

<SELECT id="mylist" size=5 >
   <OPTION Value="100">100</OPTION>
   <OPTION Value="200">200</OPTION>
   <OPTION Value="210">210</OPTION>
   <OPTION Value="211">211</OPTION>
</SELECT>

jQuery has solutions for this, or you can use the onkeypress Event to select items.

HTML

<element onkeypress="JavaScriptCodeHere">

JS

object.onkeypress="JavaScriptCodeHere"

From here, replace JavaScriptCodeHere with your JS script to pull the numbers based on keypress. I'm not gonna make it for you, as that is not what this site is for, but I can point you in the right direction.

keychar and numcheck might help ;)